29:null 2a:["$","title",null,{"children":"Quiz input | Michael Cooper | Observable"}] 2f:[] 2d:{"id":"af4a9032934d467a","slug":null,"title":"Quiz input","thumbnail":"56a2c6196270d856f61cf119aadef4399e12098cc0ca9253322ad1e4aa392b54","access_level":"public","create_time":"$D2023-02-09T16:40:50.761Z","update_time":"$D2023-09-12T17:42:58.903Z","view_time":null,"first_public_time":"$D2023-02-09T17:07:27.118Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3a9cb3bb8fb63f67","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":"starter_2024"},"version":71,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2ae65df1901fe65","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":null}],"members":[{"type":"individual","id":"b2ae65df1901fe65","login":"mythmon","name":"Michael Cooper","avatar_url":"https://avatars-next.observableusercontent.com/60cdc428c59f56064db989dbde23b5af37103628a470beeebd56d0c18c206120","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Quiz input","cells":[{"id":0,"value":"# Quiz input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":63,"value":"A demo of using nanomorph and viewof cells to create a small quiz.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":61,"value":"answers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":7,"value":"morph = require(\"https://bundle.run/nanomorph@5.4.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"