2b:null 2c:["$","title",null,{"children":"Questions organized by topic | Lingua Latina Project Classics | Observable"}] 31:T439,html`

How to make your own exercise

Implement self-correcting functionality

Put a three-column csv file somewhere on the internet (maybe in a github repository). It should include a header line with labels for each column. The quiz will open for your students with the first line preselected in pop-up menus. If you want the question to open without a question preselected, include a blank line after the header line of your csv, like this example.
Fork this notebook.
Enter or paste the URL for your csv file in the (too narrow!) cell below.

That's it!

Create a tidy presentation

Get the input cell for the csv file's URL, below, out of your students' way by dragging it to the bottom of your notebook
Delete this cell of instructions, and add a cell introducing the exercise to your students

`32:[{"id":"909a4db8288910f93e20017b39a8c116f69926608b882a62858227f774fe3ff01a15f599f7f1c0dde38bf6396e02f461094962438c650b85b5446ecf4b553f29","href":"https://static.observableusercontent.com/files/909a4db8288910f93e20017b39a8c116f69926608b882a62858227f774fe3ff01a15f599f7f1c0dde38bf6396e02f461094962438c650b85b5446ecf4b553f29","name":"q-by-topic-embed.png","type":"image/png","lastModified":1604961163020.904,"size":83186}] 2f:{"id":"05a77225fe4cf6c7","slug":"q-a-organized-by-topic","title":"Questions organized by topic","thumbnail":"ca61edb207360aeaf31808f04a2d10ca7400f1cfeffc8735f8d1b5f4b8aa9df6","access_level":"public","create_time":"$D2020-11-08T16:25:44.038Z","update_time":"$D2020-11-23T15:42:43.894Z","view_time":null,"first_public_time":"$D2020-11-08T16:27:25.417Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a9d1ba76bda8c238","login":"l3","name":"Lingua Latina Project Classics","avatar_url":"https://avatars-next.observableusercontent.com/56b07e9ba69e690e9cb3f902c97a95178ddb2f83f3f16c4560487a6f31ae3d33","tier":"starter_2024"},"version":740,"publish_version":740,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4795bb2d8282618","login":"l3","name":"Lingua Latina Project Classics","avatar_url":"https://avatars-next.observableusercontent.com/56b07e9ba69e690e9cb3f902c97a95178ddb2f83f3f16c4560487a6f31ae3d33","tier":null}],"members":[{"type":"individual","id":"b4795bb2d8282618","login":"l3","name":"Lingua Latina Project Classics","avatar_url":"https://avatars-next.observableusercontent.com/56b07e9ba69e690e9cb3f902c97a95178ddb2f83f3f16c4560487a6f31ae3d33","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"a23cae61f5819ee6","slug":"templates","title":"templates","owner":{"id":"a9d1ba76bda8c238","login":"l3","name":"Lingua Latina Project Classics"}},"type":"notebook","body":{"title":"Questions organized by topic","cells":[{"id":0,"value":"md`# Questions organized by topic\n\nQuickly create an interactive self-correcting exercise where students choose a topic and a question from that topic, and must answer the question.\n\nThe example URL loaded by default in this notebook uses Latin sentences as the \"topic\", with a series of questions and answers for each sentence, but you can use this notebook to drill any set of questions and answers grouped by topic (e.g., select a tense and answer questions about verb forms in that tense).\n\nFollow the instructions in the following cell to make your own self-correcting drill.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":577,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":732,"value":"md`## How to embed the exercise in a web page\n\n

\n${await FileAttachment(\"q-by-topic-embed.png\").image()}\n\n\n

\nTo add an iframe like the preview illustrated above to any web page:\n

from any cell's menu, choose \"Embed\", and select the cells named viewof group, viewof answer, check and css, as illustrated above.
use the Copy button to put the code for iframe on your clipboard.
paste the code for the iframe into your web page

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":583,"value":"viewof url = text({\n title: \"URL for 3-column csv file\",\n value: \"https://raw.githubusercontent.com/neelsmith/latin101/master/F20/quizbank/gerund-infinitive.csv\",\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"// Let user choose from options of all lexemes matching\nviewof group = {\n const topics = uniq(data.map(d => d[groupingcolumn]))\n return select({\n title: \"Answer questions about:\",\n value: \"conor\",\n options: topics\n})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"// this input should be questions going with this topic\nviewof chosenquestion = {\n return select({\n title: \"Select question:\",\n value: \"conor\",\n options: questions\n})\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"// enter answer here\nviewof answer = text({\n placeholder: \"Enter answer\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":546,"value":"// check answer here\ncheck = {\n const key = chosenquestion\n const record = selected.filter(d => d[questioncolumn] == key).map(d => d[answercolumn])\n \n if (answer.length == 0) {\n return md` `\n } else if (record[0] == answer) {\n return html`Correct.`\n } else {\n return html`Wrong.`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"css = l3css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"html`

Embed cells above to add this exercise to any web page as an iframe. Cells below this box just load data and code libraries and format data for display.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"md`**Data we download**: \n\nDownload a 3-column csv file, with contents organized as topic, question and answer.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"data = d3.csv(url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"md`**Organizing and formatting data**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"selected = data.filter(d => d[groupingcolumn].includes( group))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"md`**Libraries we need**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"colnames = Object.keys(data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"questions = selected.map(d => d[questioncolumn].replace(/[/]/g,\", \"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"answers = selected.filter(d => d[answercolumn]).map(d => d[answercolumn])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"groupingcolumn = colnames[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"questioncolumn = colnames[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"answercolumn = colnames[2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import {text, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":490,"value":"import {uniq} from \"@neelsmith/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"md`**Formatting results**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"import {l3css} from \"@l3/shared\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":729,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"