3f:null 40:["$","title",null,{"children":"Write your own multiple-choice quiz using a simple text file | Ross Mills | Observable"}] 46:Ta7d,currentAnswerContainer = { const container = document.createElement('div'); const question = document.createElement('div'); addQuestion(question); container.appendChild(question); const buttons = document.createElement('div'); buttons.style['margin-top'] = '16px'; const nextBtn = createNextButton(container); nextBtn.style['margin-bottom'] = '4px'; const restartBtn = createRestartButton(); buttons.appendChild(nextBtn); buttons.appendChild(html`
`); buttons.appendChild(restartBtn); container.appendChild(buttons); return container; // functions function createRestartButton() { const btn = html`` btn.addEventListener('click', () => { mutable currentQuestion = nextQuestion(true); }); return btn; } function createNextButton(container) { const btn = html`` btn.addEventListener('click', (f) => { const givenAnswerRadio = container.querySelector('input[type=radio]:checked'); Object.assign(currentQuestion, { givenAnswer: givenAnswerRadio && givenAnswerRadio.value }); mutable currentQuestion = nextQuestion(); }); return btn; } function addQuestion(container) { container.classList.add('quiz-container'); container.classList.add('box-with-shadow'); container.style['min-height'] = '200px'; if (!currentQuestion) { // Give score const score = quizModel.filter(q => q.givenAnswer == q.answer).length; container.appendChild(md`### End of Quiz! You scored: **${score} Points** `); // Render a message based on score percentage const pc = score / quizModel.length; if (pc == 1) { container.appendChild(md`You got all answers correct, amazing!`); } else if (pc > 0.6) { container.appendChild(md`Good Job!`); } else if(pc <= 0.6 && pc >= 0.4) { container.appendChild(md`Not bad!`); } else { container.appendChild(md`Ouch! Better luck next time.`); } // Render all answers container.appendChild(md` #### Answers ${quizModel.map(q => ` ##### ${q.question}
${q.givenAnswer} ${ q.answer != q.givenAnswer ? `Answer: _${q.answer}_`: ''} `).join('')} `); } else { const q = renderQuestion(currentQuestion); q.classList.add('question'); const o = renderOptions(currentQuestion); o.classList.add('options'); container.appendChild(q); container.appendChild(o); } return container; } }47:[] 44:{"id":"b90ee7cf64fbe0ec","slug":"untitled","title":"Write your own multiple-choice quiz using a simple text file","thumbnail":"6e35598bc24f666e906b1f7fd596ff3705b230b242cf0db4d934562887e3bb78","access_level":"public","create_time":"$D2020-05-01T19:16:04.175Z","update_time":"$D2020-05-15T19:07:14.542Z","view_time":null,"first_public_time":"$D2020-05-01T21:07:21.311Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":"starter_2024","bio":"Software engineer and hands-on tech leader. Creating and collaborating on interesting software projects gets me out of bed in the morning.","following":false},"version":434,"publish_version":434,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"bio":"Software engineer and hands-on tech leader.\n","following":false}],"members":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Write your own multiple-choice quiz using a simple text file","cells":[{"id":285,"value":"{\n const text = md`# Write your own multiple-choice quiz using a simple text file`;\n text.style.display = 'none';\n return text;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`---\n\n# Write your own quiz using a simple text file\n\nThis notebook allows you to write your own simple quiz from a plain text file following some simple rules. In other words, it implements a simple [Domain Specific Language](https://en.wikipedia.org/wiki/Domain-specific_language) for writing a quiz.\n\nThe types of question supported are very limited - multiple-choice, with only one answer per question. The quiz runs in the top part of the notebook, taking you through one question at a time before reporting your final score once all the questions have been answered.\n\n## The Quiz Language, how it works\n\n- Write a question, followed by a blank line\n- Then write your multiple-choice answers. Each multiple-choice option should be on its own line. \n- Mark the correct option by putting the * symbol at the end of that option.\n- Put three dashes on a newline to introduce a new question.\n\nExample:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"{\n const example = md`\n\\`\\`\\`\nPUT A QUESTION HERE\n\n1. Option 1\n2. Option 2*\n3. etc\n---\nPUT NEXT QUESTION HERE\n\nTrue\nFalse*\n---\nADD YET ANOTHER QUESTION\n\nA. 10*\nB. 20\nC. 30\n\\`\\`\\`\n`;\n example.classList.add('box-with-shadow');\n return example;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`\nEasy as that! Try modifying the \\`quiz\\` value below to start creating your own quiz.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"quiz = `\n\n1. What African nation has Lagos as its capital city?\n\nAngola\nNigeria*\nTunisia\n\n---\n\n2. Muppets are mostly left-handed.\n\nTrue*\nFalse\n\n---\n\n3. Where was inventor of the telephone Alexander Graham Bell born?\n\nUSA\nSouth Africa\nScotland*\nCanada\n\n---\n\n4. How many fingers does the average human have?\n\n5\n8\n10*\n12\n\n\n`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`---\n# Code\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function renderOptions(questionModel) {\n const options = questionModel.options.map(o =>\n `\n \n ${o}\n \n
`).join('')\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function renderQuestion(questionModel) {\n return md`### ${questionModel.question}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"mutable currentQuestion = nextQuestion();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"nextQuestion = setupQuiz(quizModel);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function setupQuiz(quiz) {\n let i = 0;\n return function (reset) {\n if (reset) {\n i = 0;\n }\n if (i <= quiz.length) {\n return quiz[i++];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function parser(qs) {\n const questions = qs.split('---')\n .map(q => q.trim())\n .map(q => q.split('\\n\\n'))\n .map(q => {\n const rawOptions = q[1].split('\\n');\n const qmodel = {\n question: q[0],\n options: rawOptions.map(o => o.replace('*', '')),\n answer: rawOptions.find(a => a[a.length - 1] === '*').replace('*', '')\n };\n return qmodel;\n });\n return questions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"quizModel = parser(quiz);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"