Leaderboard
By
selecting the corresponding button in the rightward navigational
menu, the student's "Leaderboard" module shall
display, as shown in the first mockup, above. Here, we have
a title heading of "Leaderboard," followed by
a subtitle that reports the student's current ranking among
his or her entire class, and then a visual representation
of the ranking in graph form. This is intended to be a secondary
way in which students are motivated to do well on the platform,
as competition is a strong motivator. It's also motivating
in a secondary way, by which, even if a student isn't a
natural competitor, and doesn't care about competing, he
or she will still recognize that his or her reading statistics
can be seen by classmates. In short, avoiding shame and
embarrassment is also a powerful motivator. That's obviously
not the intent of the leaderboard... to shame and embarrass
students. However, that is a natural byproduct of competition.
If you play a competitive sport, for example, you do feel
shame and embarrassment when you lose to your opponent.
It's, quite simply, unavoidable.
Ranking
Graph
Visually,
the ranking of students shall be in the form of a horizontal
bar graph, marked positionally with the student's active
avatar at the far right end of each bar, with the top student
always having a completely full bar. The lowest ranking
student's avatar shall be placed at the approximate 20%
full position. Student last names, when available, should
always be abbreviated here. The remaining students should
be autoscaled between the best and the worst performers.
Rank
Determination
Two
data points shall determine a student's overall rank in
the class: 1. stories read, and 2, texts mastered... each
simply accounting for half of the student's rank score.
As shown in the second mockup, above, hovering over any
line on the graph shall change its color scheme (in this
example, it's made brighter, but our system of custom colors
for each story means I'll have the ability to set them,
as desired), reveal the student's "ranking score"
in the two data areas in the section subtitle above. This
will help students gauge just how much better they need
to perform, in order to climb the ranks.
Ranking
Ties
It
will be possible for two or more students to have the same
ranking score in both data areas. As such, it should be
possible for there to be a tie in the ranking. In that event,
they should each have the same number in the rank. So, for
example, if two students at the top of the graph both had
exactly the same ranking score, they would each be listed
as number "1" and then the third student would
be number "3" as in that current view of the ranking,
there would be no number "2."
Ranking
By Group
Since
teachers have the ability to organize students by group,
we will also give them the ability in the student profiles
to show the leaderboard by group, instead of class. This
way, the teacher doesn't necessarily have to pit very low
performing students with, say, diagnosed learning disabilities,
in one group, against star students who greatly excel, in
another. We'll also give the teacher the ability to turn
the leaderboard off completely, for the whole class, or
any group, should he or she not wish her students to compete
against one another at all. Some teachers really do have
a quite visceral reaction to even the appearance of competition.
If the teacher turns this function off, the leaderboard
button shall be made non-actionable in the student's navigation
menu, though not redacted entirely. The leaderboard shall
also be disabled if there is only 1 student account created
in the class or group. If fewer than 3 student accounts
are active, or showing (in the event the teacher is displaying
leaderboards by group), blank, empty bars shall show in
the 1 to 2 possible empty slots. With 3 or fewer students
in a class or group, the navigational arrow must also be
non-actionable, and show in its disabled state.
Navigation
The
leftward down arrow button shall allow any student to scroll
downward through all students in classroom (or group), just
like the "My Progress" section scrolls, by 3 rows
at a time. When the last row is reached, the down arrow
shall become an up arrow, and when clicked, zoom the student
back to the very start of the leaderboard.
Styling
Checklist:
Images:
1.
Student Data Navigation Down Arrow: student_data_navigation_down_arrow.svg,
50 x 34
2.
Student Data Navigation Up Arrow: student_data_navigation_up_arrow.svg,
50 x 34
3.
Student Data Navigation Arrow: #FFFFFF40
4.
Student Data Navigation Arrow Hover: #FFFFFF80
5.
Student Data Navigation Arrow OnClick: #FFFFFFBF
6.
Student Data Navigation Arrow Disabled: #FFFFFF1A
-Note:
Colors 3 to 6 are used for both images 1 and 2 above.
Text:
MOCKUP
1:
1.
Student Leaderboard Numeral: 2.0
rem, #FFFFFFB3
2.
Student Leaderboard Name: 2.0
rem, #FFFFFFB3
MOCKUP
2:
1.
Student Leaderboard Numeral Hover: 2.0
rem, #FFFFFF
2.
Student Leaderboard Name Hover: 2.0
rem, #FFFFFF
Objects:
1.
Student Leaderboard Bar Background Empty: Variable
x 20, #FFFFFF4D
2.
Student Leaderboard Bar Background Empty Hover:
Variable x 20, #FFFFFF80
3.
Student Leaderboard Bar Background Fill 1: #37ACFF66
4.
Student Leaderboard Bar Background Fill 1 Hover:
#37ACFF
5.
Student Leaderboard Bar Background Fill 2: #00E69B66
6.
Student Leaderboard Bar Background Fill 2 Hover:
#00E69B
6.
Student Leaderboard Avatar Shadow: 44
x 44, #0000001A
|
