Implementation of a Graph of Correct Submissions vs Attempts on Question Stats Page

[nataliaqmc]

After a conversation with Matt, he suggested it would be a good idea to implement a new histogram on the Question Stats Page for each question of the Correct Submissions vs Attempts, since it would help users to keep track of how much attempts were needed for the assessment to obtain a correct answer.

This implementation would look something like this:

I was wondering if it would be a good implementation and if it would be useful for users to kep track of their students performance.

Authors: @arthurfc12 @pmahfuz

[nwalters512]

I'm going to defer to @mwest1066 or another instructor to see if this would be a useful stat in practice. In the meantime, a few notes about implementation:

• I think this would be a better fit for the "Question stats" page, instead of on the "Questions" page where it looks to be in your mock-up.
• Putting a histogram that large inline in a table does not seem like a great idea. Ideally, we'd want to match the size of the other histograms on the page, but that might make it hard to differentiate between colors at such a small size. Perhaps defaulting to small but showing a detailed view in a modal when it's clicked would work well? This could be extended to other histograms as well.

[mwest1066]

I think the screenshot above is actually from the per-question table on the question stats page. This new histogram is replacing the current column "Average number of submissions" which isn't very informative. Hopefully this new histogram conveys much more information in about the same space as the old column (assuming it is sized appropriately, of course).

I like @nwalters512's suggestion of having small histograms inline in the table with larger ones in popovers.

[mwest1066]

I also forgot to mention that the inspiration for this histogram came from Smart Physics, which had something a lot like this. It would be cool if we could track down exactly what they displayed because they put a lot of thought into it.

[nataliaqmc]

I really like @nwalters512 's popover idea for the graph, I also thought it was too big for the row. Do you have any suggestions, or is there any example of how to do that?

Also, thank you for the responses. I will have a look at the Smart Physics for better understanding of the implementation.

[nwalters512]

There are lots of examples of popovers throughout the codebase; you can look for anything with data-toggle="popover". Here's the first example I could find:

PrairieLearn/apps/prairielearn/src/components/CourseRequestsTable.html.ts

Lines 84 to 103 in 21991c8

	<button
	type="button"
	class="btn btn-sm btn-danger text-nowrap mr-2"
	id="deny-request-button-${row.id}"
	data-toggle="popover"
	data-container="body"
	data-boundary="window"
	data-html="true"
	data-placement="auto"
	title="Deny course request"
	data-content="${escapeHtml(
	CourseRequestDenyForm({
	id: `deny-request-button-${row.id}`,
	request: row,
	csrfToken,
	}),
	)}"
	>
	<i class="fa fa-times" aria-hidden="true"></i> Deny
	</button>

You can also check out the documentation for Bootstrap popovers: https://getbootstrap.com/docs/4.6/components/popovers/

[nataliaqmc]

Okay, thank you @nwalters512 .