{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Quiz 2: Lister"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "scrolled": true,
    "tags": [
     "remove-input"
    ]
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"TQhDxwScOdPT\" data-shufflequestions=\"False\" data-shuffleanswers=\"True\" data-numquestions=\"1000000\"><style>\n",
       ":root {\n",
       "    --medium-slate-blue: #6f78ffff;\n",
       "    --orange-pantone: #f75c03ff;\n",
       "    --russian-violet: #392061ff;\n",
       "    --maximum-yellow-red: #ffc857ff;\n",
       "    --viridian-green: #119da4ff;\n",
       "    --incorrect-red: #c80202;\n",
       "    --correct-green: #009113;\n",
       "}\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",
       "}\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",
       ".Answer{\n",
       "     margin: 10px 0;\n",
       "     display: grid;\n",
       "     grid-template-columns: auto auto;\n",
       "     grid-gap: 10px;\n",
       "}\n",
       ".Feedback{\n",
       "     font-size: 16pt;\n",
       "     text-align:center;\n",
       " }\n",
       "\n",
       ".Input {\n",
       "    align:left;\n",
       "    font-size: 20pt;\n",
       "}\n",
       ".Input-text {\n",
       "    display: block;\n",
       "    margin: 10px;\n",
       "    color: inherit;\n",
       "    width: 140px;\n",
       "    background-color: #c0c0c0;\n",
       "    color: #fff;\n",
       "    padding: 5px;\n",
       "    padding-left: 10px;\n",
       "\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: #c0c0c0;\n",
       "     box-shadow: 0.6rem 0.8rem 1.4rem -0.5rem #999999;\n",
       " }\n",
       "\n",
       " .MCButton{\n",
       "     background: #fafafa;\n",
       "     border: 1px solid #eee;\n",
       "     border-radius: 10px;\n",
       "     padding: 10px;\n",
       "     font-size: 16px;\n",
       "     cursor: pointer;\n",
       "     text-align: center;\n",
       " }\n",
       " .MultipleChoiceQn {\n",
       "     padding: 10px;\n",
       "     background: var(--medium-slate-blue);\n",
       "     color: #fafafa;\n",
       "     border-radius: 10px;\n",
       " }\n",
       " .ManyChoiceQn {\n",
       "     padding: 10px;\n",
       "     background: var(--orange-pantone);\n",
       "     color: #fafafa;\n",
       "     border-radius: 10px;\n",
       " }\n",
       " .NumericQn {\n",
       "     padding: 10px;\n",
       "     background: var(--russian-violet);\n",
       "     color: #fafafa;\n",
       "     border-radius: 10px;\n",
       " }\n",
       ".InpLabel {\n",
       "     line-height: 34px;\n",
       "     float:left;\n",
       "     margin-right: 10px;\n",
       "     color: #101010;\n",
       "     font-size: 15pt;\n",
       "}\n",
       ".incorrect {\n",
       "    color: var(--incorrect-red);\n",
       "}\n",
       ".correct {\n",
       "    color: var(--correct-green);\n",
       "}\n",
       ".correctButton {\n",
       "    background: var(--correct-green);\n",
       "    color: #fafafa;\n",
       "    box-shadow: inset 0px 0px 5px #555555;\n",
       "    outline: none;\n",
       "}\n",
       ".incorrectButton {\n",
       "    background: var(--incorrect-red);\n",
       "    color: #fafafa;\n",
       "    box-shadow: inset 0px 0px 5px #555555;\n",
       "    outline: none;\n",
       "}\n",
       "\n",
       "\n",
       "</style><script type=\"text/Javascript\">questionsTQhDxwScOdPT=[\n",
       "  {\n",
       "    \"question\": \"Gitt en liste a = [1, 2, 4, 9, 16, 25], hvilken kommando gir følgende output: [4, 9]?\",\n",
       "    \"type\": \"multiple_choice\",\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"answer\": \"a[3:4]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at indeksering starter på 0.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"a[2:3]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at indeksering gir til, men ikke med siste verdi.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"a[2:4]\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig. Indekseringen starter på 0 og gir til, men ikke med siste verdi.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"a[3:5]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at indeksering starter på 0.\"\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "\n",
       "  {\n",
       "    \"question\": \"Hva er output fra følgende kode?\",\n",
       "    \"code\": \"liste_a = [0, 1, 2, 3, 4, 5, 6, 7] \\nlist_b = list_a[1:-1] \\nlist_c = list_b[3:5] \\nprint(list_c)\",\n",
       "    \"type\": \"multiple_choice\",\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"answer\": \"[3, 4, 5]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at :-1 betyr til, men ikke med siste verdi og at indekseringen starter på 0.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"[3, 4]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at :-1 betyr til, men ikke med siste verdi og at indekseringen starter på 0.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"[4, 5]\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"[4]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at :-1 betyr til, men ikke med siste verdi og at indekseringen starter på 0.\"\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  {\n",
       "    \"question\": \"Hvilken kommando vil gi lista [2, 4, 6] fra følgende liste?\",\n",
       "    \"code\": \"liste = [0, 2, 4, 6, 8, 10]\",\n",
       "    \"type\": \"multiple_choice\",\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"answer\": \"liste[1:3]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at [fra:til] gir til, men ikke med siste verdi.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"liste[1:4]\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig, for [fra:til] gir til, men ikke med siste verdi.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"liste[2, 4, 6]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Da måtte vi i såfall ha skrevet liste = [2, 4, 6].\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"liste[0:3]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. 0 gir det første elementet, altså 0 i lista.\"\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  {\n",
       "    \"question\": \"Hva blir output på følgende program?\",\n",
       "    \"code\": \"tall = [1, 1, 13, 5, 55, 3, 4, 12, 10, 4] \\nprint(tall[4] \\ntall.remove(4) \\nprint(tall[-2]) \\ntall.append(3) \\nprint(tall[:3])\",\n",
       "    \"type\": \"multiple_choice\",\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"answer\": \"55 10 [1, 1, 13]\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"55 4 [1, 1, 13]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at [fra:til] gir til, men ikke med siste verdi.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"55 10 5\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at [fra:til] gir til, men ikke med siste verdi.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"55 10 [1, 1, 13, 5]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Husk at [fra:til] gir til, men ikke med siste verdi.\"\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  {\n",
       "    \"question\": \"Hvordan kan vi slette tallet 7 fra følgende liste?\",\n",
       "    \"code\": \"liste = [1, 3, 5, 7]\",\n",
       "    \"type\": \"many_choice\",\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"answer\": \"liste.pop(7)\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Funksjonen pop tar indeks som argument, ikke tallet i seg selv: pop(3) ville fungert.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"del liste[3]\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"liste.delete(7)\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil, delete er ikke en funksjon i Python.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"liste.remove(7)\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"liste.remove(3)\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Funksjonen remove tar ikke indeks, men selve elementet som argument.\"\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  {\n",
       "    \"question\": \"Hva er output fra følgende program?\",\n",
       "    \"code\": \"liste = [1, 2, 3] \\nprint(2*(liste[0] + liste[1]*2) + 2*(liste[0] + liste[-1]*2))\",\n",
       "\n",
       "    \"type\": \"numeric\",\n",
       "    \"precision\": 2,\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"type\": \"value\",\n",
       "        \"value\": 24,\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig.\"\n",
       "      },\n",
       "      {\n",
       "        \"type\": \"range\",\n",
       "        \"range\": [ -1000, 24 ],\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Tallet skal være større.\"\n",
       "      },\n",
       "      {\n",
       "        \"type\": \"range\",\n",
       "        \"range\": [ 25, 1000 ],\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Tallet skal være mindre.\"\n",
       "      },\n",
       "      {\n",
       "        \"type\": \"default\",\n",
       "        \"feedback\": \"Feil.\"\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  {\n",
       "    \"question\": \"Hvilket output gir følgende program?\",\n",
       "    \"code\": \"liste = ['a','b','a'] \\nprint(2*(liste[0] + liste[1]*2) + liste[0] + liste[-1]*2)\",\n",
       "    \"type\": \"multiple_choice\",\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"answer\": \"ababaa\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"abba\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Her er det logikk, ikke kunnskap om populærkultur som gjelder.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"abbabbaaa\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"abaabaaba\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"Vi får en feilmelding.\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil. Det er lov å multiplisere strenger (tekst) med et hetall n. Da får vi strengen n ganger etter hverandre.\"\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  {\n",
       "    \"question\": \"Hva er korrekt om følgende program?\",\n",
       "    \"code\": \"tall = [1, 2, 3, 4, 5] \\n# a) \\nprint(tall) \\n# b) \\nprint(tall[0:5]) \\n# c) \\nprint(tall[:])\",\n",
       "    \"type\": \"multiple_choice\",\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"answer\": \"Output i b) er forskjellig fra a) og c).\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"Output i a) er forskjellig fra b) og c).\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"Output i c) er forskjellig fra a) og c).\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"Ingen av outputene er det samme.\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"Alle outputene er det samme.\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig.\"\n",
       "      }\n",
       "    ]\n",
       "  },\n",
       "  {\n",
       "    \"question\": \"Vi har en liste N = [1, 2, 3, 4, 5]. Hva blir lista når vi kjører følgende kodesnutt?\",\n",
       "    \"code\": \"N[3] = 0 \\nprint(N)\",\n",
       "    \"type\": \"multiple_choice\",\n",
       "    \"answers\": [\n",
       "      {\n",
       "        \"answer\": \"[1, 2, 3, 0, 5]\",\n",
       "        \"correct\": true,\n",
       "        \"feedback\": \"Riktig.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"[1, 2, 0, 4, 5]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"[1, 2, 3, 0, 0]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"[0, 0, 0, 4, 5]\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      },\n",
       "      {\n",
       "        \"answer\": \"Dette endrer ikke denne lista.\",\n",
       "        \"correct\": false,\n",
       "        \"feedback\": \"Feil.\"\n",
       "      }\n",
       "    ]\n",
       "  }\n",
       "];\n",
       "    //var mydiv=document.getElementById(\"testDIV\");//console.log(mydiv);// 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",
       "function check_mc() {\n",
       "    var id=this.id.split('-')[0];\n",
       "\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<3)) {\n",
       "        label=label.parentElement;\n",
       "        //console.log(depth,label);\n",
       "        depth++;\n",
       "    }\n",
       "\n",
       "\n",
       "\n",
       "    var answers=label.parentElement.children;\n",
       "\n",
       "    //console.log(answers);\n",
       "\n",
       "\n",
       "    // Split behavior based on multiple choice vs many choice:\n",
       "    var fb = document.getElementById(\"fb\"+id);\n",
       "    //console.log(id, \", got numcorrect=\",fb.dataset.numcorrect);\n",
       "    if (fb.dataset.numcorrect==1) {\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.textContent=label.dataset.feedback;\n",
       "            } else{\n",
       "                fb.textContent=\"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.textContent=label.dataset.feedback;\n",
       "            } else{\n",
       "                fb.textContent=\"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 {\n",
       "        var reset = false;\n",
       "        var feedback;\n",
       "        if (label.dataset.correct==\"true\" )   {\n",
       "            if (\"feedback\" in label.dataset) {\n",
       "                feedback=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=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",
       "\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 (MathJax) {\n",
       "        var version=MathJax.version;\n",
       "        if (version[0]==\"2\") {\n",
       "            MathJax.Hub.Queue([\"Typeset\",MathJax.Hub]);\n",
       "        } else if (version[0] == \"3\") {\n",
       "            MathJax.typeset();\n",
       "        }\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {\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",
       "\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=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",
       "\t\t\t\tif (submission.indexOf('/') != -1) {\n",
       "            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",
       "            precision=ths.dataset.precision;\n",
       "            // console.log(\"1:\", submission)\n",
       "            submission=Math.round((1*submission + Number.EPSILON)*10**precision)/ 10**precision; \n",
       "            // console.log(\"Rounded to \", submission, \" precision=\", 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",
       "        answers=JSON.parse(ths.dataset.answers);\n",
       "        console.log(answers);\n",
       "\n",
       "        var defaultFB=\"\";\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",
       "                    fb.textContent=answer.feedback;\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",
       "                if ((submission >= answer.range[0]) && (submission < answer.range[1])) {\n",
       "                    fb.textContent=answer.feedback;\n",
       "                    correct=answer.correct;\n",
       "                    console.log(answer.correct);\n",
       "                    done=true;\n",
       "                }\n",
       "            } else if (answer.type==\"default\") {\n",
       "                defaultFB=answer.feedback;\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",
       "\n",
       "        if ((!done) && (defaultFB != \"\")) {\n",
       "            fb.textContent=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",
       "        if (MathJax) {\n",
       "            var version=MathJax.version;\n",
       "            if (version[0]==\"2\") {\n",
       "                MathJax.Hub.Queue([\"Typeset\",MathJax.Hub]);\n",
       "            } else if (version[0] == \"3\") {\n",
       "                MathJax.typeset();\n",
       "            }\n",
       "        }\n",
       "        return false;\n",
       "    }\n",
       "\n",
       "}\n",
       "\n",
       "function isValid(el,  charC) {\n",
       "\t\tif (charC == 46) {\n",
       "\t\t\t\tif (el.value.indexOf('.') === -1) {\n",
       "\t\t\t\t\t  return true;\n",
       "\t\t\t\t} else if (el.value.indexOf('/') != -1) {\n",
       "            parts=el.value.split('/');\n",
       "\t\t\t\t    if (parts[1].indexOf('.') === -1) {\n",
       "\t\t\t\t\t      return true;\n",
       "            }\n",
       "        }\n",
       "        else{\n",
       "\t\t\t\t\t  return false;\n",
       "\t\t\t\t}\n",
       "\t\t} else if (charC == 47) {\n",
       "\t\t\t\tif (el.value.indexOf('/') === -1) {\n",
       "            if ((el.value != \"\") && (el.value != \".\")) {\n",
       "\t\t\t\t\t      return true;\n",
       "            } else {\n",
       "\t\t\t\t\t  return false;\n",
       "\t\t\t\t    }\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "\t\t} else if (charC == 45) {\n",
       "        if (el.value == \"\" ) {\n",
       "            return true;\n",
       "        } else {\n",
       "            return false;\n",
       "        }\n",
       "    } else {\n",
       "\t\t\t\tif (charC > 31 && (charC < 48 || charC > 57))\n",
       "\t\t\t\t\t  return false;\n",
       "\t\t}\n",
       "\t\treturn true;\n",
       "}\n",
       "\n",
       "function numeric_keypress( evnt) {\n",
       "\t\tvar charC = (evnt.which) ? evnt.which : evnt.keyCode;\n",
       "\n",
       "    if (charC==13) {\n",
       "        check_numeric(this, evnt);\n",
       "    } else{\n",
       "\t\t    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 show_questions (json, mydiv) {\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",
       "    \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.className='Quiz';\n",
       "        mydiv.appendChild(iDiv);\n",
       "        // iDiv.innerHTML=qa.question;\n",
       "\n",
       "        var outerqDiv = document.createElement('div');\n",
       "        outerqDiv.id=\"OuterquizQn\"+id+index;\n",
       "        //qDiv.textContent=qa.question;\n",
       "        iDiv.append(outerqDiv);\n",
       "\n",
       "        // Create div to contain question part\n",
       "        var qDiv = document.createElement('div');\n",
       "        qDiv.id=\"quizQn\"+id+index;\n",
       "        //qDiv.textContent=qa.question;\n",
       "        qDiv.innerHTML=qa.question;\n",
       "        outerqDiv.append(qDiv);\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\")  {\n",
       "            num_correct=make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\n",
       "        } else if   (qa.type==\"many_choice\"){\n",
       "            num_correct=make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id);\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",
       "    if (MathJax) {\n",
       "        var version=MathJax.version;\n",
       "        if (version[0]==\"2\") {\n",
       "            MathJax.Hub.Queue([\"Typeset\",MathJax.Hub]);\n",
       "        } else if (version[0] == \"3\") {\n",
       "            MathJax.typeset();\n",
       "        }\n",
       "    }\n",
       "    return false;\n",
       "}\n",
       "\n",
       "        //console.log(element);\n",
       "        {\n",
       "        const jmscontroller = new AbortController();\n",
       "        const signal = jmscontroller.signal;\n",
       "\n",
       "        setTimeout(() => jmscontroller.abort(), 5000);\n",
       "\n",
       "        fetch(\"https://raw.githubusercontent.com/andreasdh/Programmering-og-modellering/master/docs/quizer/quiz2.json\", {signal})\n",
       "        .then(response => response.json())\n",
       "        .then(json => show_questions(json, TQhDxwScOdPT))\n",
       "        .catch(err => {\n",
       "        console.log(\"Fetch error or timeout\");\n",
       "        show_questions(questionsTQhDxwScOdPT, TQhDxwScOdPT);\n",
       "        });\n",
       "        }\n",
       "        </script>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from jupyterquiz import display_quiz\n",
    "\n",
    "display_quiz('https://raw.githubusercontent.com/andreasdh/Programmering-og-modellering/master/docs/quizer/quiz2.json')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Edit Metadata",
  "finalized": {
   "timestamp": 1622574926456,
   "trusted": true
  },
  "kernelspec": {
   "display_name": "Python 3",
   "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.8.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}