Story
Library
Each
time a student signs in, he or she shall be met with the
platform's "Story Library," as shown in the first
mockup, above. This page is the actual web app view students
will be using, and its purpose is primarily to give the
student a choice of 3 texts to begin reading. This view
consists of the same logo and subtitle as the homepage and
login screens. Directly below is the "Story Infoblock,"
which presents the student with the title and brief synopsis
of the first story, and a "Read It" button. Underneath
that is the library's search function. In the upper left
corner is the student's "Profile Module," which
includes access to the navigation menu, and then the "Story
Selector Array" module down in the lower right corner.
Story
Selection Ordering
The
3 texts the student is presented with upon login will be
determined by a few factors. Firstly, if the student hasn't
yet read the story being showcased on the platform's homepage
when he or she signs in, that story shall remain as the
first story upon sign in. The stories featured on the homepage
will always be seasonal, and hence we don't want to entice
a student with a high interest image on the homepage, and
then, when the student signs in, he or she has to struggle
to find that particular story to read. So, if the student
hasn't yet read said story, it will always be the first
story shown. If not, a different story should load in that
slot. In terms of the story that should show there in that
event, as well as the two stories that show after it in
"Story Selector Array," all we need is for them
to be chosen randomly, from the entire library of available
stories that are 1. Identified as being at the student's
grade level (this will be set by the admin for a story when
it is uploaded); 2. At the student's current reading level
100 point range (texts will have a number rating for difficulty
from 0.01 to 15.00) or closest to said range, and 3. that
are "New" to the student or have yet been attempted
by the student (an attempt is starting the quiz for a story).
In the event there are no "New" texts available,
the next priority is "Read" texts, and then finally
"Mastered" texts. "Featured" stories,
as well as stories the teacher has "pinned" should
show before random selectin takes over.
In
the event there are fewer than 3 remaining texts that are
"New" (or in any section, for that matter) the
platform shall show blank, opacity-reduced containers.
If
all "New" stories have been finished, when this
page initially loads upon login, it should, by default,
show stories from the next priority classification, and
so forth.
Read
It Button
When
the student clicks the "Read It" button in the
"Story Infoblock," all page elements shall fade
out, and the actual immersive student reading experience
for the story in question, shall fade in.
Story
Selection Array
If
a student doesn't want to read the active story on the screen,
he or she can select a different one from the other two
in the trio offered in the lower right corner. These story
icons should drop to 75% opacity on hover, and 50% on click.
When clicked, the active story's background image and "Infoblock"
should fade to swap with the newly selcted story's background
image and "Infoblock," and the newly selected
story should slide into slot 1 of the trio.
Story
Selection Array Navigation
The
arrow to the left the trio of story choices in the "Story
Selection Array" should slide the story icons, three
at a time, to the right. A maximum of 12 stories should
load in the selection array each time. We want to give the
student some choice upon login, but not a thousand choices.
Story
Selection Array Icons
Be
advised that these icons will be separate images from the
background image, when a story is uploaded, so that, at
times, only a portion of the background image can be used
for the icon.
Preloading
Background Images
Upon
loading of the "Story Library" in any form, we'll
always want to preload the background images for the trio
of stories shown in the "Story Selection Array,"
and add a preloading for any background image of a story,
as it's added to the trio, during the browsing process.
We'll also likely want to preload at least the next three
icons for the stories that come next in the order of those
being served.
Story
Selection Array Heading and Subtitle
This
text shall be "Story Library," followed by a subtitle
that invites the student to select a story based on 3 classifications:
new, previously read, and mastered. "New" are
stories for which the student has not attempted the quiz.
"Read" are stories for which the student has missed
at least one of the quiz questions on the first try. "Mastered"
is the student having answered all of the quiz questions
correctly on the first try during a single taking of said
quiz. Each of these terms is hyperlinked. When the term
is clicked, the heading should change, and all 3 choices
should reveal themselves, as links, as shown in the third
mockup, above. When any of the other three links is clicked,
the default subtitle should return, and a new trio of stories
should load, based on the student's selection. For this
transition, let's fade out the current 3 icons, and replace
them with the new 3 icons.
Note:
These links, when active, begin at 70% opacity, 50% opacity
on hover, 25% on click. If there are no stories currently
within any section, the links should be brought to 50% opacity,
and made inactive.
The
ordering of "New" stories has already been outlined
above. For "read" and "mastered" stories,
always show the most recently attempted that CAN be reattempted,
first. On Readingful, students will be forced to wait 24
hours to retry a quiz for the same story. In that period,
the story's "Read It" button should be made inactive,
at 50% opacity. If the user hovers over the button in this
state, let's show a "clock" icon and a message
that informs the student in what length of time the story
may be retried, as shown in the fourth mockup above. For
"mastered" stories, let's always show the most
recently mastered story first, and the rest in chronological
order.
Also,
not the trio of stars next to the title in the fourth mockup.
This is to indicate how many questions the student has answered
correctly on the first try during the quiz last attempt.
Styling
Checklist:
Images
1.
Profile Module Sign Out Button: sign_out.svg,
22 x 20, #FFFFFF40
2.
Profile Module Sign Out Button Hover: #FFFFFF80
3.
Profile Module Sign Out Button OnClick: #FFFFFFBF
4.
Profile Module Knowledge Coin Icon: knowledge_coin_icon.svg,
14 x 16, #FFFFFFB3
5.
Profile Module Default Avatar: student_avatar.svg,
72 x 72
6.
Selection Array Navigation Arrow: story_selection_arrow.svg,
34 x 50, #FFFFFF40
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
7.
Selection Array Navigation Arrow Hover: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
8.
Selection Array Navigation Arrow OnClick: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
9.
Selection Array Navigation Arrow Disabled: #FFFFFF1A
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
10.
Story Access Timeout Icon: story_timeout.svg,
24 x 24, #FFFFFF80
11.
Story Mastery Rating Array Icon: story_rating.svg,
80 x 20
12.
Story Mastery Rating Array Icon 1: story_rating_1.svg,
80 x 20
13.
Story Mastery Rating Array Icon 2: story_rating_2.svg,
80 x 20
14.
Story Mastery Rating Array Icon 3: story_rating_3.svg,
80 x 20
Text:
MOCKUP
1:
1.
Story Title: 3.6 rem,
#FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
2.
Story Synopsis: 1.8 rem,
#FFFFFFB3
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
3.
Read It Button Text: 2.4
rem, #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
4.
Read It Button Text Hover: 2.4
rem, #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
5.
Read It Button Text OnClick: 2.4
rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
6.
Read It Button Text Disabled: 2.4
rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
7.
Search Text Default: 4.8
rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
8.
Search Text: 4.8 rem,
#FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
9.
Sign Up Button Text: 2.4
rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
10.
Sign Up Button Text Hover: 2.4
rem, #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
11.
Sign Up Button Text OnClick: 2.4
rem, #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
12.
Login Button Text: 2.4 rem,
#464D7F
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
13.
Login Button Text Hover: 2.4
rem, #464D7FBF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
14.
Login Button Text OnClick: 2.4
rem, #464D7F80
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
15.
Story Selection Array Title: 3.8
rem, #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
16.
Story Selection Array Subtitle: 2.4
rem, #FFFFFFB3
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
17.
Story Category Selector Link: 2.4
rem, #FFC053B3
18.
Story Category Selector Link Hover: 2.4
rem, #FFC053
19.
Story Category Selector Link OnClick: 2.4
rem, #FFC05380
20.
Profile Module Student Name: 2.4
rem, #FFFFFF
21.
Profile Module Knowledge Coin Amount: 2.0
rem, #FFFFFFB3
MOCKUP
3:
1.
Category Selector Link Disabled: 2.4
rem, #FFC05380
MOCKUP
4:
1.
Story Selection Restricted Notification Text: 1.8
rem, #FFFFFFB3
(DUPLICATE, ORIGINAL SHOWN IN "SEARCH" SPECS)
Objects:
1.
Read
It Button Background: 130 x 50,
#6C96FF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
2.
Read
It Button Background Hover: 130 x
50, #6C96FFBF
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
3.
Read
It Button Background OnClick: 130
x 50, #6C96FF80
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
4.
Read
It Button Background Disabled: 130
x 50, #6C96FF80
(DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)
5.
Story
Selection Array Empty Background:
216 x 156, #FFFFFF26
(DUPLICATE, ORIGINAL SHOWN IN "SEARCH" SPECS)
|
