protoschool.github.io
protoschool.github.io copied to clipboard
Add tutorial passed icon to tutorial cards
When we revamped the tutorials page to show cards instead of the whole indexes (as now only seen on tutorial landing pages), we failed to pull in an icon to indicate when someone has already passed a tutorial.
Trophy emoji currently used on tutorial landing page:
No corresponding icon currently on tutorial cards on homepage, tutorials page, and new course pages. It's especially important to add it here because tutorials are cross-listed across courses and it may be easier to forget which tutorials you've already visited than it used to be.
Now that we've actually had some professional design help, my old trophy emoji looks out of place, so we may want to replace it with either:
- a line drawing of a trophy in the style of our tutorial type icons
- the checkmark in a green circle icon that we're already using for lesson status (this could be our go to to get it shipped if there's a wait to do something new)
- other ideas?
And another decision to make is whether, on the tutorial cards, we only want to add a success indicator when they've finished or if we want to add the full range of not stated, partway done, completed icons as used in the lessons.
And.. where on the card to put this icon. Normally I would've suggested top right but the tutorial type icon is probably too close for comfort there. Bottom right perhaps?
Thoughts @zebateira or other design-minded folks?
I think a good short-term solution would be to use the lesson icons you suggested:
But I think that we need something different to distinguish between those two different types of achievements (lesson completed, tutorial completed).
As far as the placement, we can put it on the bottom along with text indicating the percentage of the tutorial completed (maybe even with a progress bar if started but not completed (another progress bar could also be added to the top of the lesson page indicating the progress of the tutorial, complementing the 3 of 7
lesson progress indicator, but that's something to talk about in another issue).
And so when the tutorial gets completed we might even use another type of language that is not a trophy.