2f:[] 2d:{"title":"Quiz input","cells":[{"id":0,"value":"# Quiz input","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"A demo of using nanomorph and viewof cells to create a small quiz.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"viewof answers = quizInput({\n questions: [\n [\"The earth is a planet\", \"yes\"],\n [\"The sun is a star\", \"yes\"],\n [\"Pluto is a planet\", \"no\"],\n [\"Pluto is a star\", \"no\"]\n ],\n options: [\"yes\", \"no\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"answers","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"function quizInput({ questions, options = [\"true\", \"false\"] }) {\n let answers = questions.map(() => null);\n let root = htl.html`\n ${options.map(\n (opt) => htl.html`

${opt}

`\n )}\n

Question

Right?

\n ${Array.from(questions.entries(), ([i, [question, correct]]) =>\n quizInputRow({\n question,\n options,\n correct,\n onChange: (newAnswer) => {\n answers[i] = newAnswer;\n root.value = answers;\n root.dispatchEvent(new CustomEvent(\"input\"));\n }\n })\n )}\n `;\n root.value = answers;\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"function quizInputRow({\n question,\n options = [\"A\", \"B\"],\n correct = \"A\",\n onChange = () => {}\n}) {\n let root = htl.html`

`;\n\n function setAnswer(answer, initial = false) {\n morph(\n root,\n htl.html`

`\n );\n\n root.value = answer;\n if (!initial) {\n root.dispatchEvent(new CustomEvent(\"input\"));\n onChange(answer);\n }\n }\n\n setAnswer(null, true);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"morph = require(\"https://bundle.run/nanomorph@5.4.2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}