Introduction • Introduction to classquiz

Why

library(classquiz)

Small quizes in lectures can help gauge how well the students have understood the material.

Commercial services exist, for example Mentimeter. Mentimeter is focused on asking single questions rather than a batch of questions, so isn’t ideal for making a quiz.

classquiz is designed to use google forms to ask questions, google sheets to store the responses, observable to download the results from google sheets, process and plot them in lecture slides which have been rendered with quarto. Other services for hosting the forms and results could be used instead.

Preparation

Make and publish google form. The following types of question are supported.

multiple-choice grid (one per form)
multiple-choice (several questions per form if they have the same set of answers) Only one type of question is allowed per form.

Have google form save results in google sheets.
Share read access to google sheet with anyone who has link.
Remember to delete old responses from the google sheet before class (There must be at least one, possibly blank row or ojs is upset).

Add questions to quarto document

Add question form to quarto with cq_add_form(). This function displays the URL provided in an iframe.

```{r}
cq_add_form(
  form_url = "https://docs.google.com/forms/d/e/1FAIpQLSeLIUnzdTfBUqjr_X0MvF7JBDQgy_mndeZVsjgW4JR3tFRHSw/viewform?usp=sharing&ouid=107915462972182704713"
)
```

Add plot of results to quarto document

Add the results of the quiz to quarto with cq_add_results(). This function makes a set of observable code chunks that download the data, process it and plot it. You need to use the type argument to give the type of question. Only “multiple_choice_grid” is currently properly supported. You must use the #| output: asis code block option so that the generated observable chunks are correctly interpreted.

```{r}
#| output: asis
cq_add_results(
  sheet_url = "https://docs.google.com/spreadsheets/d/1v3jF5jzbd4bpsmf1x-cZpX1NmL4FAsR0tGIh-a5I_RU/edit?resourcekey=&gid=24040024#gid=24040024", 
  type = "multiple_choice_grid"
)
```

import { aq, op } from '@uwdata/arquero'

getCsvUrl = url => {
  url = new URL(url);
  const id = url.pathname.split('/')[3]
  const gid = new URLSearchParams(url.hash.slice(1)).get('gid') || 0;
  return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`
}

url_1 = 'https://docs.google.com/spreadsheets/d/1v3jF5jzbd4bpsmf1x-cZpX1NmL4FAsR0tGIh-a5I_RU/edit?resourcekey=&gid=24040024#gid=24040024'
data_1 = {
  refresh_1;
  yield(aq.loadCSV(getCsvUrl(url_1)))
}

cnames_1 = data_1
                     .columnNames()
                     .filter((c) => !['Timestamp', 'Score'].includes(c))
                     .map(d => d.replace(/^.*\[/, '').replace(/]$/, ''));
foldData_1 = data_1
  .fold(aq.not('Timestamp', 'Score'), { as: ['question', 'answer'] })
  .spread({question: d => op.split(d.question, '[')} , {as: ['question_title', 'question']})
           .derive({question: d => op.replace(d.question, ']', '')});

Plot.plot({
  marginLeft: 100,

  marginBottom: 60,
  
  x: {label: 'Frequency', labelOffset: 50},
  y: {label: null, domain: cnames_1},
  color: {
    legend: true,
    
    
  },
  style: {fontSize: '25px'},
  marks: [
    Plot.barX(foldData_1, {y: 'question', x: 1, inset: 0.5, fill: 'answer', sort: 'answer'}),
    Plot.ruleX([0])
  ]
})

viewof refresh_1 = Inputs.button('Refresh')

Customise appearance of the plots

You can customise the appearance of the plots. The height can be changed with the height argument. Unless the question text is very short, you will need to increase the leftMargin. domain gives the possible responses, and range specifies the colours to be used.

```{r}
#| output: asis

cq_add_results(
  sheet_url = "https://docs.google.com/spreadsheets/d/1v3jF5jzbd4bpsmf1x-cZpX1NmL4FAsR0tGIh-a5I_RU/edit?resourcekey=&gid=24040024#gid=24040024", 
  type = "multiple_choice_grid", 
  height = 500, 
  marginLeft = 170,
  domain = c("Yes", "No"),
  range = c("green", "orange")
)
```

url_2 = 'https://docs.google.com/spreadsheets/d/1v3jF5jzbd4bpsmf1x-cZpX1NmL4FAsR0tGIh-a5I_RU/edit?resourcekey=&gid=24040024#gid=24040024'
data_2 = {
  refresh_2;
  yield(aq.loadCSV(getCsvUrl(url_2)))
}

cnames_2 = data_1
                     .columnNames()
                     .filter((c) => !['Timestamp', 'Score'].includes(c))
                     .map(d => d.replace(/^.*\[/, '').replace(/]$/, ''));
foldData_2 = data_2
  .fold(aq.not('Timestamp', 'Score'), { as: ['question', 'answer'] })
  .spread({question: d => op.split(d.question, '[')} , {as: ['question_title', 'question']})
           .derive({question: d => op.replace(d.question, ']', '')});

Plot.plot({
  marginLeft: 170,

  marginBottom: 60,
  height: 500,

  x: {label: 'Frequency', labelOffset: 50},
  y: {label: null, domain: cnames_2},
  color: {
    legend: true,
    domain: ["Yes", "No"],
    range: ["green", "orange"],
  },
  style: {fontSize: '25px'},
  marks: [
    Plot.barX(foldData_2, {y: 'question', x: 1, inset: 0.5, fill: 'answer', sort: 'answer'}),
    Plot.ruleX([0])
  ]
})

viewof refresh_2 = Inputs.button('Refresh')