2b:null 2c:["$","title",null,{"children":"Matching paired items | Lingua Latina Project Classics | Observable"}] 31:T417,html`

How to make your own exercise

Implement self-correcting functionality

Put a two-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 wnat 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 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":"44248a55e0a3c326c2d2ca354a9d4914ef56b4a2fe82b784c4f3e7c8755fdbbfdfa96e67e8778cf8ebdeee1378f203b64b53826a296d7ea845fdee825dc0646c","href":"https://static.observableusercontent.com/files/44248a55e0a3c326c2d2ca354a9d4914ef56b4a2fe82b784c4f3e7c8755fdbbfdfa96e67e8778cf8ebdeee1378f203b64b53826a296d7ea845fdee825dc0646c","name":"matching-embed@1.png","type":"image/png","lastModified":1604960025076.545,"size":101797}] 2f:{"id":"cd9f9606566bd31d","slug":"matching-paired-items","title":"Matching paired items","thumbnail":"0e9a4fef6d3977dfd9222557b008aa043cc7cef917281c498a4bf3a93fb0af29","access_level":"public","create_time":"$D2020-11-08T16:20:47.671Z","update_time":"$D2020-11-09T22:17:19.002Z","view_time":null,"first_public_time":"$D2020-11-08T16:21:08.293Z","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":409,"publish_version":409,"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":3,"collection":{"id":"a23cae61f5819ee6","slug":"templates","title":"templates","owner":{"id":"a9d1ba76bda8c238","login":"l3","name":"Lingua Latina Project Classics"}},"type":"notebook","body":{"title":"Matching paired items","cells":[{"id":0,"value":"md`# Matching paired items\n\n\nQuickly create an interactive self-correcting exercise where students are given one value and must generate a second. The example URL loaded by default in those notebook quizzes transformations of finite verbs from active<->passive, but you can use this notebook to drill transformations of any pair of associtations you can think of (singular<->plural, indicative<->subjunctive, one tense to/from another, ...)\n\nFollow the instructions in the following cell to make yhour own self-correcting drill.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"md`## How to embed this exercise in a web page\n\n

\n${await FileAttachment(\"matching-embed@1.png\").image()}\n\n\n

To add an iframe like the preview illustrated above to any web page:

\n\n

from any cell's menu, choose \"Embed\", and select the cells named viewof chosenCol1, viewof col1tocol2, answer1, viewof chosenCol2, viewof col2tocol1, answer2 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\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"viewof url = text({\n title: \"URL for 2-column csv file\",\n value: \"https://raw.githubusercontent.com/LinguaLatina/courses/master/quizdata/active-passive.csv\",\n\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`## Match ${col1name} to ${col2name}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"viewof chosenCol1 = {\n return select({\n title: \"Select from \" + col1name,\n value: \"conor\",\n options: col1data\n})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"viewof col1tocol2 = text({\n title: \"Transform the expression to \" + col2name,\n placeholder: \"Enter answer here\",\n minlength : 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"answer1 = {\n const key = chosenCol1\n const record = data.filter(pr => pr[col1name] == key).map(pr => pr[col2name])\n \n if (col1tocol2.length == 0) {\n return md` `\n } else if (record[0] == col1tocol2) {\n return html`Correct.`\n } else {\n return html`Wrong.`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"md`## Match ${col2name} to ${col1name}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"viewof chosenCol2 = {\n return select({\n title: \"Select from \" + col2name,\n value: \"conor\",\n options: col2data\n})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"viewof col2tocol1 = text({\n title: \"Transform the expression to \" + col1name,\n placeholder: \"Enter answer here\",\n minlength : 30\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"answer2 = {\n const key = chosenCol2\n const record = data.filter(pr => pr[col2name] == key).map(pr => pr[col1name])\n \n if (col2tocol1.length == 0) {\n return md` `\n } else if (record[0] == col2tocol1) {\n return html`Correct.`\n } else {\n return html`Wrong.`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":382,"value":"css = l3css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"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.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"data = {\n if (url.length == 0) {\n return ([])\n } else {\n return d3.csv(url)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"colnames = Object.keys(data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"col1name = colnames[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"col2name = colnames[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"col1data = data.map( pr => pr[col1name])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"col2data = data.map( pr => pr[col2name])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"md`**Libraries we need**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"import {text, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"import {l3css} from \"@l3/shared\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"html`\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"