Stories
The
"Stories" content area of the "Teacher Dashboard"
shall be accessible via the second button in the left navigational
menu, as shown in the first mockup above. The purpose of
this area is to allow teachers access to the full library
of text passages that will be offered to their students.
Just like other sections of the dashboard, it consists of
a title heading, a subtitle (that in this case maintains
a count of the total number of text passages available),
a topline section navigational menu, and then a listing
of the stories themselves, in table form. Each time the
"Stories" section is visited, it should list the
stories in chronological order, by publication date—newest
stories first.
The
Table
Story
entries shall be listed, and sortable, in the table by a
few data points: Title, Genre, Grades, and Access, as well
as each showing an image icon to the left that represents
each text passage. You'll also notice a small icon above
the images, which does not have any function. Clicking any
of the word based title headings shall sort the table accordingly.
Clicking "On" or "Off" at the far right
of any entry shall toggle whether the teacher's students
have access to a particular story. This gives teachers the
ability to not show specific stories that have subject matter
with which they don't personally agree. Clicking the story's
title shall show the individual story panel, and clicking
the top and bottom rows shall allow the user to scroll/navigate
the story listings.
Note
that stories which begin with "a" "an"
or "the" have said definite articles shown at
the end of the title, after a comma. For example, "A
Stubborn Kitty" becomes "Stubborn Kitty, A."
Inactive
Stories
Entries
for inactive stories (those the admin has temporarily deactivated
in the admin panel—such as when editing, preparing
to edit, or for any reason, really) shall still nonetheless
display in the "Stories" table, yet reduced to
50% opacity, labeled with the access descriptor "Inactive,"
and be inaccessible, by both students and teachers, as shown
in the second mockup, above. Inactive stories don't reduce
the story count reported in the subtitle. In the admin panel,
there will also be the ability to make created stories "hidden"
in which case they won't show in the table at all, and not
add to the count of available stories. In the table, active
stories should always show before inactive stories. The
goal with making this distinction (active, inactive, or
hidden) is to prevent a situation in which a teacher was
just looking at a story in the "Stories" section,
but now can't find it, because it's temporarily inactive,
due to being disabled for editing or something like that.
An "inactive" state tells the teacher, "This
story will be available again very shortly." It's just
a nice distinction to have.
During
the 2 week free trial, only the text passages that a teacher's
students have access to will be accessible to the teacher
in the "Stories" content area, as well. I'm currently
thinking this will be around 40 to 50 texts, or so. The
remaining stories in the library will show as inactive,
and when hovered over will show "This text is unavailable
during your free trial." in the content section subtitle.
Search
The
first icon of the topline navigation menu in the "Stories"
section shall, when clicked, fade in the section's "Search"
function, as shown beginning with the third mockup, above.
This module has a form field for text entry, limited to
a maximum of 24 characters, and begins with the state of
"Awaiting input..." in the lower right. As shown
in the fourth mockup above, when the user types a word or
phrase, and stops typing, the "processing" animation
replaces "Awaiting input..." along with "Searching..."
in the lower left infoline footer. After holding for a couple
of beats, the result shall be either a reporting of "No
results found" in the lower right, or the number of
results found displayed on a button in the lower right,
as shown in the fifth mockup, above. Upon clicking the button,
the user shall fade back to the table, which will display
the actual results, as shown in the sixth mockup, above.
Note that when displaying search results, the number of
results is also shown in the "Stories" section
subtitle, along with an "x" button. Clicking the
"x" should clear the search results (bring the
user back to the main story listing table), while clicking
the "Search" icon again should bring the user
back to the "Search" module. The sixth mockup
also shows how to handle fewer than 5 search results—by
displaying blank rows.
Individual
Story Panel
When
the teacher clicks the title for any story, the "Individual
Story Panel" shall fade in to show a larger image,
title, genre, and a synopsis for the story, along with a
"Read It" button in the lower right, and buttons
for bookmarking/pinning said story, as shown in the seventh
mockup, above. When the "Bookmark" or "Pin"
buttons are hovered over, or clicked, the text shall change
in the section subtitle. You can see an example of this
in the eighth mockup, above. The various states would be:
Bookmark this story, This story has been bookmarked, Remove
this story from your bookmarks, Pin this story to prioritize
it for your students, This story has been pinned, Unpin
this story, etc.
Pinned
and Bookmarked Stories
When
a teacher "pins" or "bookmarks" a story,
they shall show in the custom sections of the topline menu
for displaying them, by most recently added, first, as shown
in the ninth mockup, above. The difference between the two
is that a teacher bookmarks a story simply to be able to
find it quickly in the future. However, when a story is
pinned, it is prioritized for showing to students in the
"Story Selection Array." The latter gives the
teacher the ability to find and select text passages he
or she wants his or her students to focus on, first. Such
as passages that go well with certain units of study, etc.
Story
(Teacher View)
Upon
clicking the "Read It" button for any individual
story entry, the "Teacher View" of the actual
student reading experience shall fade in. This will be the
same story view that the student sees, just with an additional
component in the upper right, under the paragraph selector
(the "Readability Level Selection Array"). A mockup
for this is shown in the "Story" specifications.
Note that when a teacehr is viewing a story from within
his or her teacher account, the "back button"
on the story must return the teacher to the "Stories"
module, instead of return to the "Story Library"
like it does for the student user.
Styling
Checklist
Images:
1.
Stories Topline Menu (Search): story_search_icon,
32 x 32
2.
Stories Topline Menu (Pin): pinned_stories_icon.svg,
32 x 32
3.
Stories Topline Menu (Bookmark): bookmarks_icon.svg,
32 x 32
4.
Teacher Account Topline Menu Button: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
5.
Teacher Account Topline Menu Button Hover: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
6.
Teacher Account Topline Menu Button OnClick: #FFFFFF40
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
7.
Teacher Account Topline Menu Button Selected: #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
8.
Teacher Account Topline Menu Button Disabled: #FFFFFF40
(DUPLICATE, ORIGINAL SHOWN IN "TEACHER DASHBOARD"
SPECS)
-NOTE:
Colors 4 to 8 apply to icons 1 to 3, above. They are universal
for all topline menus in the teacher account.
9.
Stories Table Icon: story_table_icon.svg,
24 x 14, #DCE2EA
10.
Teacher Account Section Subtitle Close Button:
x_button.svg, 12 x 12 #FFFFFF40
11.
Teacher Account Section Subtitle Close Button Hover:
#FFFFFF80
12.
Teacher Account Section Subtitle Close Button OnClick:
#FFFFFFBF
13.
Teacher Subsection Close Button: close_button_icon.svg,
24 x 24, #E2E8F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
14.
Teacher Subsection Close Button Hover: #E2E8F7BF
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
15.
Teacher Subsection Close Button OnClick: #E2E8F780
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
16.
Teacher Subsection Processing Animation Component:
processing_dot.svg, 12 x 12,
#6F8AE2 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
17.
Stories Bookmark Button Icon: bookmark_story_button.svg,
50 x 50, #FFFFFF
18.
Stories Bookmark Button Icon Hover: #FFFFFFBF
19.
Stories Bookmark Button Icon OnClick: #FFFFFF80
20.
Stories Bookmark Button Icon Bookmarked: #FFFFFF
21.
Stories Pin Button Icon : pin_story_button.svg,
50 x 50, #FFFFFF
22.
Stories Pin Button Icon Hover: #FFFFFFBF
23.
Stories Pin Button Icon OnClick: #FFFFFF80
24.
Stories Pin Button Icon Pinned: #FFFFFF
Text:
MOCKUP
1:
1.
Teacher Account Section Title: 3.8
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
2.
Teacher Account Section Subtitle: 2.0
rem, #FFFFFFB3 (DUPLICATE,
ORIGINAL SHOWN IN "TEACHER DASHBOARD" SPECS)
3.
Stories Table Heading Text: 1.8
rem, #727C96
4.
Stories Table Heading Hover: 1.8
rem, #727C96BF
5.
Stories Table Heading OnClick: 1.8
rem, #727C9680
6.
Stories Table Story Title: 1.6
rem, #40424C
7.
Stories Table Story Title Hover: 1.6
rem, #6195FF
8.
Stories Table Story Title OnClick: 1.6
rem, #6195FF80
9.
Stories Table Genre: 1.6
rem, #456DB5
10.
Stories Table Grades: 1.6
rem, #456DB5
11.
Stories Table Access Toggle: 1.6
rem, #6195FF
12.
Stories Table Access Toggle Hover: 1.6
rem, #6195FFBF
13.
Stories Table Access Toggle OnClick: 1.6
rem, #6195FF80
14.
Teacher Subsection Processing Animation Component:
processing_dot.svg, 12 x 12,
#6F8AE2 (DUPLICATE, ORIGINAL SHOWN
IN "STUDENT ACCOUNT CREATION" SPECS)
15.
Teacher Profile Name: 2.4
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "TEACHER DASHBOARD" SPECS)
MOCKUP
2:
1.
Stories Table Story Title Disabled: 1.6
rem, #40424C4D
2.
Stories Table Genre Disabled: 1.6
rem, #456DB54D
3.
Stories Table Grades Disabled: 1.6
rem, #456DB54D
4.
Stories Table Access Toggle Disabled: 1.6
rem, #6195FF4D
MOCKUP
3:
1.
Teacher Subsection Title: 2.4
rem, #6F8AE2 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
2.
Teacher Subsection Subtitle: 2.0
rem, #B7C7F7 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
3.
Teacher Subsection Form Field Text Default: 2.0
rem, #9BA9C9 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
4.
Teacher Subsection Informational Text: 1.6
rem, #576082 (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
5.
Teacher Subsection Infoline Footer Text: 1.6
rem, #BFC6DD (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
6.
Teacher Subsection Search Awaiting Input Notification:
2.0 rem, #DFE3EF
MOCKUP
4:
1.
Teacher Subsection Form Field Text: 2.0
rem, #50557F (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
MOCKUP
5:
1.
Teacher Subsection Submit Button Text: 2.2
rem, #FFFFFF (DUPLICATE, ORIGINAL
SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
2.
Teacher Subsection Submit Button Text Hover: 2.2
rem, #FFFFFFBF (DUPLICATE,
ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION" SPECS)
3.
Teacher Subsection Submit Button Text OnClick:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
4.
Teacher Subsection Submit Button Text Disabled:
2.2 rem, #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STUDENT ACCOUNT CREATION"
SPECS)
MOCKUP
6:
1.
Teacher Account Section Subtitle Search Results
Text: 2.0 rem, #FFFFFFB3
MOCKUP
7:
1.
Stories Entry Title: 2.8
rem, #343642
2.
Stories Entry Subtitle: 2.0
rem, #8DA3E0
3.
Stories Entry Synopsis: 1.6
rem, #97A6C6
Objects:
1.
Teacher Subsection Table Divider: 714
x 2, #E7EBF2
(DUPLICATE, ORIGINAL SHOWN IN "STUDENTS" SPECS)
2.
Stories Table Row Background 1: 628
x 40, #E9F3FF
3.
Stories Table Row Background 2: 628
x 40, #D3E5FF
4.
Stories Table Row Background Hover: 628
x 40, #FFE884
5.
Stories Table Row Background 1 Disabled: 628
x 40, #E9F3FF80
6.
Stories Table Row Background 2 Disabled: 628
x 40, #D3E5FF80
7.
Stories Table Row Background Hover Disabled: 628
x 40, #FFE88480
8.
Stories Entry Bookmark Button Background: 50
x 50, #E2E8F7
9.
Stories Entry Bookmark Button Background Hover:
50 x 50, #FF6C6C
10.
Stories Entry Bookmark Button Background OnClick:
50 x 50, #FF6C6C80
11.
Stories Entry Bookmark Button Background Bookmarked:
50 x 50, #FF6C6C
12.
Stories Entry Pin Button Background: 50
x 50, #E2E8F7
13.
Stories Entry Pin Button Background Hover: 50
x 50, #FFC04B
14.
Stories Entry Pin Button Background OnClick: 50
x 50, #FFC04B80
15.
Stories Entry Pin Button Background Pinned: 50
x 50, #FFC04B
|
