2b:null 2c:["$","title",null,{"children":"Timed self-test on groups of multiple-choice answers | Lingua Latina Project Classics | Observable"}] 31:T443,md`# Timed self-test on groups of multiple-choice answers Create an interactive exercise where students are presented with a group of multiple-choice answers to a question. In this example, the question presents a dictionary and a form: the multiple-choice options are morphological properties of the word. (The cell named question could be altered to display a simple question instead.) The example URLs loaded by default in this notebook offer multiple-choice values for the tense and voice of finite subjunctive verb forms, with gender identified for perfect and pluperfect passive forms, but you can use this notebook to identify any multiple-choice options you choose (gender, case and number of nouns, for example, or person, number, tense, mood, and voice of finite verbs). Students can set a timer for how long a randomly selected question should be displayed, and can start or pause the exercise at any time. There is also a slider to adjust volume on the sound that plays when the question changes. Follow the instructions in the following cell to make your own exercise. `32:T6a4,html`

How to create your own quiz

1. Data files

You need to put two comma-separated files somewhere on the internet (maybe in a github repository).

a file with questions and answers. The first column should be the dictionary entry and the second column the form to identify. Include any morphological properties you like in further columns (e.g., gender, case and number for participles).
a two-column file listing allowed values for radio buttons. The first column should be the same name as a property in your question/answer file (e.g., tense. The second column should be a list of all possible values separated by the pipe character |.

Example data files: a question and answer file might look like this:

dictionary,form,tense,mood,voice amo/amare/amavi/amatus,amet,present,subjunctive,active amo/amare/amavi/amatus,amaretur,imperfect,subjunctive,passive

A corresponding file configuring radio buttons could be:

label,values tense,present|imperfect|perfect mood,indicative|subjunctive voice,active|passive

2. Configuring a notebook

Fork this notebook.
Enter or paste the URLs for your two csv files in the two (too narrow!) cells below.
That's it. There is no step 3!

Create a tidy presentation Get the two input cells with URLs out of your students' way by dragging them to the bottom of your notebook. Delete this cell of instructions, and add a cell introducing the exercise to your students.

`33:[{"id":"247ecd5b541802cd5e75322fa5ad184a37767694623cd6faa7c3aced3a6a2ace3e5943087037ac355bc321f0a1d7619b9ac823ce645b9f85ed32e1a4a02707a3","href":"https://static.observableusercontent.com/files/247ecd5b541802cd5e75322fa5ad184a37767694623cd6faa7c3aced3a6a2ace3e5943087037ac355bc321f0a1d7619b9ac823ce645b9f85ed32e1a4a02707a3","name":"timed-quiz-embed@2.png","type":"image/png","lastModified":1604961448167.754,"size":160257}] 2f:{"id":"c806e6bf2568267e","slug":"timed-identification-of-forms","title":"Timed self-test on groups of multiple-choice answers","thumbnail":"f074ea43ef9f873e91d202641d0bd8ea9a3406698c25c909ad44b28dc8dfc4f3","access_level":"public","create_time":"$D2020-11-08T16:28:05.360Z","update_time":"$D2020-11-23T15:42:23.911Z","view_time":null,"first_public_time":"$D2020-11-08T16:28:28.364Z","fork":true,"stars":3,"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":474,"publish_version":474,"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":1,"collection":{"id":"a23cae61f5819ee6","slug":"templates","title":"templates","owner":{"id":"a9d1ba76bda8c238","login":"l3","name":"Lingua Latina Project Classics"}},"type":"notebook","body":{"title":"Timed self-test on groups of multiple-choice answers","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":385,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":464,"value":"md`## How to embed your quiz in a web page\n\n\n

\n${await FileAttachment(\"timed-quiz-embed@2.png\").image()}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"// You can directly edit this cell if you prefer not to use a text box.\n// This single line would work exactly the same way as this text box:\n// qandaurl = \"https://raw.githubusercontent.com/neelsmith/latin101/master/F20/quizbank/verbs-speedid1.csv\"\n//\nviewof qandaurl = text({\n title: \"URL for csv file with questions and answers\",\n value: \"https://raw.githubusercontent.com/neelsmith/latin101/master/F20/quizbank/verbs-speedid1.csv\",\n\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"// You can directly edit this cell if you prefer not to use a text box.\n// This single line would work exactly the same way as this text box:\n// radiosurl = \"https://raw.githubusercontent.com/neelsmith/latin101/master/F20/quizbank/verbs-tmv-radios.csvcsv\"\n\nviewof radiosurl = text({\n title: \"URL for csv file defining radio buttons\",\n value:\"https://raw.githubusercontent.com/neelsmith/latin101/master/F20/quizbank/verbs-tmv-radios.csv\"\n\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"settings = md`### Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"// Let user set value of seconds per question using a slider:\nviewof seconds = slider({\n min: 4,\n max: 20,\n step: 1,\n value: 8,\n title: \"Seconds per question\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"// Let user set volume of beep with a slider.\n// Volume is on a 0-1 scale with 2 digits of precision.\n//\nviewof volume = slider({ title: \"Volume\", value: 0.25, min: 0, max: 1, precision: 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"quizheader = md`## Start the quiz!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"// Mike Bostock's Scrubber lets us cycle through the questions at an interval\n// specified by the \"delay\" value. (It expects milliseconds, so we multiply by 1000\n// to get full seconds.\n// The \"shuffled\" array is a randomly ordered view of the \"data\" array.\n//\nviewof quizdata = Scrubber(shuffled, {delay: seconds * 1000, autoplay: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"question = { \n sound(true)\n return md`## Analyze *${quizdata.form}*\n\nDictionary entry: *${quizdata.dictionary}*\n\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"directions = {\n return md`## Choose values for ${radiolabels.join(', ')}`\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":303,"value":"viewof answer = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"verified = {\n if (answer[radiolabels[0]] === undefined) {\n return html`Waiting for answer `\n } else {\n if (answerok()) {\n return html`Correct.`\n } else {\n return html`Wrong.`\n } \n\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"css = l3css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"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":16,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"radiodata = d3v5.csv(radiosurl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"radiolabels = radiodata.map(r => r.label)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"data = d3v5.csv(qandaurl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"// shuffle non-empty values from data\nshuffled = {\n const nonempty = data.slice().filter(d => d[col1name] != \"\")\n const shuffleddata = d3.shuffle(nonempty);\n return shuffleddata;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":" columnnames = Object.keys(data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"buttongroups = Object.keys(radiodata[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"col1name = columnnames[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"// true if user's answer is correct\nanswerok = function() {\n \n const ok = radiolabels.map(l => propertyok(l))\n return (! ok.includes(false))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"// true if correct value is chosen for property pname \npropertyok = function(pname) {\n return (answer[pname] == quizdata[pname])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"// split string in an array on pipe character\nvalueslist = function(s) {\n return s.split(\"|\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"formatRadios = function() {\n const groupProperty = buttongroups[0]\n const valuesProperty = buttongroups[1]\n const htmlItems = radiodata.map(r => \"

\" + r[groupProperty] + \": \" + formatRadio(r[groupProperty], r[valuesProperty]) + \"

\")\n return htmlItems.join(\"\\n\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"formatRadio = function(group, values) {\n \n const valueList = values.split(\"|\")\n const htmlItems = valueList.map(v => \"\" + v + \"\")\n return htmlItems.join(\"\\n\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":411,"value":"md`## Audio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"//\naudioContext = {\n if (typeof (window.AudioContext || window.webkitAudioContext) === \"undefined\") {\n throw new Error(\"Your browser does not support the AudioContext API!\");\n }\n return new AudioContext();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":417,"value":"//\n// makes a sound when play == true\nsound = function(play) {\n play;\n const frequency = 880\n const oscillatorType = \"sine\"\n \n const time = audioContext.currentTime;\n const osc = audioContext.createOscillator();\n const gainNode = audioContext.createGain();\n osc.connect(gainNode);\n gainNode.connect(audioContext.destination);\n osc.frequency.value = frequency;\n osc.type = oscillatorType;\n gainNode.gain.value = volume;\n osc.start(time)\n osc.stop(time + 0.25)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"d3v5 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require(\"d3-array@2\", \"d3-random@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"import {slider, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"import {l3css} from \"@l3/shared\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"blocksCss = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"