After a conversation with Matt, he suggested it would be a good idea to implement a ne

I'm going to defer to <a class="user-mention notranslate" data-hovercard-type="user" d

I really like <a class="user-mention notranslate" data-hovercard-type="user" data-hov

Okay, thank you <a class="user-mention notranslate" data-hovercard-type="user" data-ho

Implementation of a Graph of Correct Submissions vs Attempts on Question Stats Page,about prairielearn/prairielearn

nwalters512 commented on June 24, 2024

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.

from prairielearn.

mwest1066 commented on June 24, 2024

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.

from prairielearn.

mwest1066 commented on June 24, 2024

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.

from prairielearn.

nataliaqmc commented on June 24, 2024

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.

from prairielearn.

nwalters512 commented on June 24, 2024

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/

from prairielearn.

nataliaqmc commented on June 24, 2024

Okay, thank you @nwalters512 .

from prairielearn.

Implementation of a Graph of Correct Submissions vs Attempts on Question Stats Page about prairielearn HOT 6 OPEN

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	<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>