search

wayneyu / merapp

A Scala/Play web application for Math Education Resources
http://merapp.herokuapp.com
Other
0 stars 1 forks source link

Use the d3js library to jazz up the exams page? #118

Open WillThompson opened 9 years ago

WillThompson commented 9 years ago

i.e. Compare this: http://merapp.herokuapp.com/exams and this: http://merapp.herokuapp.com/topics

The exams page looks pretty bland by comparison.

BernhardKonrad commented 9 years ago

Hm, do you have an idea of how we could improve the exams page? Maybe the d3 gallery could be a source of inspiration: https://github.com/mbostock/d3/wiki/Gallery Eg, how about something like this BubbleMenu?

WillThompson commented 9 years ago

I like the Bubblemenu, but would it make sense to use the same presentation as used for the topics for consistency? (with the area of each circle approximately proportional to the number of completed exams)

WillThompson commented 9 years ago

Actually, I think that since we have a number of parent topics... which make it hard to see which element to click on to reach a particular topic... it may make sense to use

http://mbostock.github.io/d3/talk/20111018/tree.html

for the topics menu as well as the exams menu:

What do you think?

BernhardKonrad commented 9 years ago

We could do that too. But the topic zoom map has no natural ordering (just as the topics), whereas the courses do. So I don't think we need to be consistent in this case.

BernhardKonrad commented 9 years ago

The tree for the topics would also work. Would be nice to have them side-by-side. Or maybe use this for the topics: http://bl.ocks.org/mbostock/1093025

WillThompson commented 9 years ago

I think either of them would be good. I personally like the tree, but I don't feel attached to a particular one.

BernhardKonrad commented 9 years ago

The current topic zoom map could also be improved: eg on hover() of a parent topic we could display all subtopic in a side panel.

WillThompson commented 9 years ago

I'm not concerned about that... I'm concerned that if a student clicks on a topic that has a large number of children that they may not be sure which topic they're clicking on. e.g. If we click on "Elementary number theory" on the topics page ( http://merapp.herokuapp.com/topics ), then we suddenly see ~10 topics with long names clustered together in the centre and it becomes difficult to click on the one of interest.

BernhardKonrad commented 9 years ago

Yes, that's certainly a problem. I think this can be rescued by highlighting the hover subtopic. But if you think it's better to replace the zoom map altogether, go for it! I'm happy to help with an intro to d3.