Story
Upon
clicking the "Read It" button for any "active"
story in the "Story Library," the page, and its
elements, should fade out, and fade in the elements for
the actual "Story Reading" view, as shown in the
first mockup above. This page is intentionally kept as simple
as possible, so as to fully immerse the student in the text
he or she is reading, while listening to it be read aloud.
The page consists of the story's title and a play/pause
button, with a timeline scrubber beside it, in the upper
left of the page. In the upper right corner is a paragraph
counter/browser. In the lower left is a back button to return
the student to the "Story Library." Finally, in
the lower right is the first paragraph for the story in
question—each paragraph written to a maximum of five
lines of text.
Play
Button
By
clicking the play/pause button, the audio reading of the
story shall immediately begin, and the "play"
symbol on the button should swap to a pause symbol. As the
story is read, the text shall highlight, sentence by sentence,
in sync with the story's audio reading, just like it does
on Readagogo. This is shown in the second mockup, above.
Story
Flow
My
goal is to intentionally write each story so that every
paragraph is under the five line threshold, with a maximum
of 9 paragraphs. This way, as the story is read, and it
flows naturally, Readingful simply needs to fade out the
previous paragraph, and fade in the new paragraph, as the
story's sequence moves along.
Story
Audio Files
The
anatomy of a story's audio file composition is as follows:
title (title.mp4), intro (intro.mp4)
- redacted, paragraphs (variable number as individual
sentences). Each sentence has a version number, paragraph
number, and sentence number. So, "v1-p1-s1.mp4"
is version 1, paragraph 1, sentence 1. The last sentence
of the story's last paragraph also contains outro music.
Background
Images
All
story background images are saved in WebP format. The image
"default.webp" is the image show in the background
of the story library when the story is selected. It is also
the image that should be using for "Story Reading,"
if no other images exist for the story. If images doe exist,
corresponding to specific paragraphs, they are images "1.webp"
to "9.webp" in the story package upload. "q.webp"
is the image that should load at the very end of the story,
to set up the quiz (see "Starting the Quiz" below).
One
Sentence Paragraphs
Sometimes,
paragraphs may be as small as just a few words, amounting
to a single sentence. This is often the case with dialogue
between multiple characters. When this occurs, the single
sentence shall be made right aligned, as shown in the third
mockup, above.
Pause
Button
Clicking
the "pause" state of the button should halt the
reading where it is at that moment, and swap back in the
play symbol on the button.
Paragraph
Browser
The
"Paragraph Browser" in the upper right corner
serves two purposes. One, it marks the current paragraph
of the story or article that is currently showing, and two,
its buttons allow the reader to advance the text forward
or backward by whole paragraph. When the story is moved
forward, or backward, by paragraph, it should always reset
to the very beginning of the paragraph (meaning no text
highlighting should show as of yet). This way, the student
will know that when the play button is clicked again, the
story will always begin playing again from the start of
the paragraph. This "Paragraph Browser" works
as a slider. For the first paragraph, the first button will
be highlighted. When the second paragraph is advanced to,
the second button highlights. But, then when the third paragraph
is highlighted, the trio of buttons is to slide leftward
by one, now showing 2, 3, 4. In other words, the goal is
to (except for the first and last paragraphs of any story),
for the active paragraph to be highlighted in the second
position, with positions one and three acting as buttons
to advance forward or backward in the sequence.
Timeline
Scrubber
This
simple sliding scrubber shall allow the student to move
backward and forward within the full time span of the audio
recording, incrementally, sentence by sentence, and should
function during both play and paused states.
Sentence
Clicking
In
addition to the timeline scrubber, and the paragraph navigator,
the student shall also be able to click or tap any sentence
to highlight it, and play just that sentence, followed by
the story pausing. When hovering over a sentence, it should
highlight to an accent color, and drop to 50% opacity, on
click. When an individual sentence finishes playing in this
mode, the sentence should cease being highlited.
Starting
the Quiz
As
shown in the fourth mockup, above, when the audio reading
of the story completes, and the timeline scrubber is at
it's end point, and the "Paragraph Browser" on
the letter Q, the last paragraph of the story shall fade
out and be replaced with the "Start Quiz" button,
along with an alt version of the story's background image
that incorporates speech bubbles or other graphic overlays
(which will be part of the image, not coded separately),
to facilitate the student beginning the corresponding reading
comprehension assessment for the text in question. Prior
to clicking this button, the student can quit the story,
using the back button in his or her browser, for example,
to return to the "Story Library." However, once
this button is clicked, and the quiz begins, the student
shall be locked into finishing the quiz.
Reading
Level Selector Array
This
array of 15 buttons shall display direcly under the "Paragraph
Browser" when a teacher or admin is signed in and viewing
the student reading experience, but not show for the student.
As each story or article in Readingful's library will have
up to 15 different versions, there is one button for each
potential version (with existing versions showing the actual
reading level of the text on the button, and blank containers
used for missing versions), as shown in the sixth mockup,
above. When the story loads, the button of the currently
shown reading level of text should be selected. Clicking
another button should return the story to Paragraph 1 for
the new version to show (if it was clicked while viewing
a different paragraph of the story).
Guest
Sampling
If
the user should arrive at the story page while not signed
in (as a guest) by clicking the "Read It" button
on the homepage or the "learn more" page, he or
she should be considered to be sampling the story. When
this occurs, he or she should see a modal that notifies
the user he or she is merely sampling the student reading
experience, as shown in the sixth mockup above. This modal
should darken the screen behind it to black at 25% opacity,
and copy/resemble the styling of the modules in the teacher
and admin areas. The infoline footer of the notice is to
remind students that they should log in first, to begin
reading the story in question. It contains a "log in"
link that should take the user back to the homepage, if
that happens to be the case. This will be a good way to
stop students from initiating the sample reading of a story
without first being signed in. Clicking either the X button,
or the "Close" button, shall close the modal.
When the user completes the student reading experience for
the story being sampled, he or she should be automatically
routed to the "Learn More" page of the platform,
so as to faciliate the creating of a new teacher account.
"You’re about
to sample the full student reading expereince for this story
or article—including the corresponding quiz that follows.
Afterward, you’ll be invited to create an account,
which will give you complete access to begin trying Readingful
with your students for free. Sweet! Upon closing this message,
click the play button to get started."
Guest
Sampling Limitation
Guest
users should be limited to sampling a total of three texts,
determined by IP logging. If a guest user attempts to sample
a fourth text (within an hour from the first), he or she
should be met with the limitation notice shown in the eighth
mockup, above. The "Sign Up" button shall link
to the "Learn More" page.
"You
have sampled the maximum number of stories and articles
permitted as a guest user. To continue trying the student
experience, by reading texts, and taking quizzes, from our
story library—as well as to begin using Readingful
with your students for free, please sign up for an account.
Teacher accounts are free and always will be."
Limitation
To
prevent wayward students from simply trying to bulldoze
their way through the program, without actually reading
the text, the "Start Quiz" button should be reduced
to 50% opacity, and be inactive, unless the student has
either actually played the audio reading all the way through,
or since opening the story, the same amount of time has
elapsed as the audio reading. This should only apply to
the first time the student has opened and is reading the
text. On additional visits in the future, simply to try
to master the quiz again, students may immediately skip
to the end of the story to start the quiz.
Story
Reading Progression (Detailed)
1.
Student clicks the "Read It" Button.
Result:
"Story Library" page fades out, "Story Reading"
page fades in. The background image only changes if there
exists a "1.webp" file in the story package. If
not, "default.webp" maintains (and shows for any
paragraph specific images that are missing).
2.
Student clicks the "Play" Button.
Result: The audio progression of the story
playback occurs.
A. title.mp4 is played.
B. intro.mp4 is played - redacted
C. all sentence audio is played, beginning with Pargraph
1, Sentence 1.
-Sentences individually highlight while being read.
-Sentences highlight when hovered over.
-If a sentence is clicked during playback, said sentence
plays all the way through, and playback stops. Clicking
the "Play" button starts the playback again from
this point.
-If pause button is clicked during a reading of a sentence,
the play button shows, and the sentence remains highlighted.
Clicking "Play" resumes the playback from the
point at which it was paused.
-While sentences are read, "Paragraph Browser"
correctly notes which paragraph the sentence being read
exists within.
-As paragraphs change, so does the background image, if
an associated image for said paragraph exists in the story
package upload. If not, default.webp shows or maintains.
-If student clicks a "Paragraph Browser" button,
the student is navigated to the beginning of said paragraph.
If this occurs during playback, playback stops.
-If student clicks a "Paragraph Browser" button,
the change should also fade in and out the proper background
images for each paragraph, if separate images for paragraphs
exist in story package.
D. "Paragraph Browser" advances to "Q,"
the q.webp image fades in, and the last paragraph of text
fades out, replaced by the "Start Quiz" button.
Styling
Checklist:
Images:
1.
Story Play Button: story_play_button.svg,
60 x 40, #FFFFFF
2.
Story Play Button Hover: #FFFFFFBF
3.
Story Play Button OnClick: #FFFFFF80
4.
Story Pause Button: story_pause_button.svg,
60 x 40, #FFFFFF
5.
Story Pause Button Hover: #FFFFFFBF
6.
Story Pause Button OnClick: #FFFFFF80
7.
Story Runtime Scrubber Button: story_runtime_scrubber_button.svg,
32 x 32, #FF4D4D
8.
Story Runtime Scrubber Button Hover: #F23838
9.
Story Runtime Scrubber Button OnClick: #E52525
10.
Story Paragraph 1 Button Icon: p1.svg,
40 x 40
11.
Story Paragraph 2 Button Icon: p2.svg,
40 x 40
12.
Story Paragraph 3 Button Icon: p3.svg,
40 x 40
13.
Story Paragraph 4 Button Icon: p4.svg,
40 x 40
14.
Story Paragraph 5 Button Icon: p5.svg,
40 x 40
15.
Story Paragraph 6 Button Icon: p6.svg,
40 x 40
16.
Story Paragraph 7 Button Icon: p7.svg,
40 x 40
17.
Story Paragraph 8 Button Icon: p8.svg,
40 x 40
18.
Story Paragraph 9 Button Icon: p9.svg,
40 x 40
19.
Story Paragraph Q Button Icon: pq.svg,
40 x 40
20.
Story Paragraph Button Icon Selected: #FFFFFF
21.
Story Paragraph Button Icon Unselected: #FFFFFF80
22.
Story Paragraph Button Icon Hover: #FFFFFFBF
23.
Story Paragraph Button Icon OnClick: #FFFFFF
-Colors
20 to 23 apply to images 10 to 19 above.
24.
Story Back Button: story_back_button.svg,
34 x 50, #FFFFFF40
25.
Story Back Button Hover: #FFFFFF80
26.
Story Back ButtonOnClick: #FFFFFFBF
27.
Story Back Button Disabled: #FFFFFF1A
Text:
MOCKUP
1:
1.
Story Passage Title: 4.8
rem, #FFFFFF
2.
Story Text: 2.4 rem,
#FFFFFF80
4.
Story Paragraph Browser Preface: 3.0
rem, #FFFFFF80
MOCKUP
2:
1.
Story Text Highlighted: 2.4
rem, #FFFFFF
2.
Story Text Hover: 2.4
rem, #FFFFFFBF - NOT SHOWN
3.
Story Text OnClick:2.4
rem, #FFFFFF80 - NOT SHOWN
-NOTE:
The hover and onclick states for story text are because
a student can click any sentence and play it from start,
to finish, in isolation. When a sentence is highlighted
via hover, if another is currently highlighted, due to being
played, it should return to being regular story text. Only
one sentence should ever be highlighted at a time.
MOCKUP
4:
1.
Start Quiz Button Text: 2.4
rem, #FFFFFF
2.
Start Quiz Button Text Hover: 2.4
rem, #FFFFFFBF
3.
Start Quiz Button Text OnClick: 2.4
rem, #FFFFFF80
4.
Start Quiz Button Text Disabled: 2.4
rem, #FFFFFF80 - NOTSHOWN
MOCKUP
5:
1.
Story Reading Level Selection Array Button Text:
2.0 rem, #FFFFFF
2.
Story Reading Level Selection Array Button Text
Hover: 2.0 rem, #FFFFFFBF
3.
Story Reading Level Selection Array Button Text
OnClick: 2.0 rem, #FFFFFF80
4.
Story Reading Level Selection Array Button Text
Disabled: 2.0 rem, #FFFFFF80
MOCKUP
6:
1.
Story Warning Modal Title: 2.4
rem, #6F8AE2
2.
Story Warning Modal Paragraph Text: 1.6
rem, #576082
3.
Story Warning Modal Infoline Footer: 1.6
rem, #BFC6DD
4.
Story Warning Modal Infoline Footer Hyperlink:
1.6 rem, #BFC6DD
5.
Story Warning Modal Infoline Footer Hyperlink Hover:
1.6 rem, #6C96FF
6.
Story Warning Modal Infoline Footer Hyperlink OnClick:
1.6 rem, #6C96FF80
7.
Story Warning Modal Submit Button Text: 2.2
rem, #FFFFFF
8.
Story Warning Modal Submit Button Text Hover: 2.2
rem, #FFFFFFBF
9.
Story Warning Modal Submit Button Text OnClick:
2.2 rem, #FFFFFF80
Objects:
1.
Story Play Button Background: 60
x 40, #3D3D6D
2.
Story Play Button Background Hover: 60
x 40, #3D3D6DBF
3.
Story Play Button Background OnClick: 60
x 40, #3D3D6D80
4.
Story Pause Button Background: 60
x 40, #3D3D6D
5.
Story Pause Button Background Hover: 60
x 40, #3D3D6DBF
6.
Story Pause Button Background OnClick: 60
x 40, #3D3D6D80
7.
Story Runtime Scrubber Track: 300
x 8, #FFFFFF80
8.
Story Runtime Scrubber Track Fill: 300
x 8, #FFFFFFBF
9.
Start Quiz Button Background: Variable
x 50, #669BFF
10.
Start Quiz Button Background Hover:
Variable x 50, #669BFFBF
11.
Start Quiz Button Background OnClick: Variable
x 50, #669BFF80
12.
Start Quiz Button Background Disabled: Variable
x 50, #669BFF80
13.
Story Paragraph Button Background Selected: 40
x 40, #6994FF
14.
Story Paragraph Button Background Unselected: 40
x 40, #6994FF80
15.
Story Paragraph Button Background Hover: 40
x 40, #6994FFBF
16.
Story Paragraph Button Background OnClick: 40
x 40, #6994FF
17.
Story Reading Level Selection Array Button Background:
2.4 rem, #638DF7
18.
Story Reading Level Selection Array Button Background
Hover: 2.4 rem, #638DF7BF
19.
Story Reading Level Selection Array Button Background
OnClick: 2.4 rem, #638DF780
20.
Story Reading Level Selection Array Button Background
Disabled: 2.4 rem, #638DF780
21.
Story Warning Modal Background: 734
x 320, #FFFFFF
22.
Story Warning Modal Submit Button Background: Variable
x 50, #669BFF
23.
Story Warning Modal Submit Button Background Hover:
Variable x 50, #669BFFBF
24.
Story Warning Modal Submit Button Background OnClick:
Variable x 50, #669BFF80
|
