Story
Quiz
When
the student clicks or taps the "Start Quiz" button,
that button, along with the play button, and scrubber should
fade out, to be replaced with the elements of the quiz's
first multiple choice question (chosen randomly from among
the set of questions that exist for the story), as well
as the background image returning to the default, as shown
in the first mockup, above. This consists of a question
counter directly before a play button (questions will also
have audio readings), the text of the question itself, and
then below it a notification showing the student how many
coins will be awarded for answering the question correctly
on the first try, which will be variable—depending
on question difficulty. In the lower right will be between
two and four answers from which the student is prompted
to select. In the upper left are dedicated "Power Up"
buttons, the function of which students may purchase with
"Knowledge Coins."
The
Play/Pause Button
With
a click of the play button, it should become the pause button,
and begin playing the audio for the current quiz question.
This audio will be broken into several parts: Question Number/Stinger,
Question Text, Letter A, Answer 1, Letter B, Answer 2, Letter
C, Answer 3, Letter D, Answer 4. In other words, that's
ten separate audio files to stitch together for the reading
of just one question, if it has four possible answers. That's
because we want the question, each time it appears, to show
the answers in a randomly chosen order. That way, if students
fail the question the first time around, they can't simply
memorize the letter of which response was correct. A total
of three multiple choice questions will be shown for each
story/article. As the audio of the question plays, each
answer should highlight, as it is read, as shown in the
second mockup, above (answers begin at 75% opacity, and
hightly 100% opacity). Being that the reading of each answer
starts with the audio for the letter that precedes it, the
timing of this highlighting should be fairly simple to turn
on, and off, at a code level. After the audio finishes playing,
the pause button reverts to the play button.
Answering
Incorrectly
On
Readingful, students earn a minimum of 1 coin for each question
they answer correctly ON THE FIRST TRY, as well as gain
a variable number (usually 0.01) on their currently assigned
reading levels. Meaning, if they select a wrong answer with
their first selection, they not only don't earn any coins
(the coin reward noted under the question answers shall
fade away or be crossed out), but lose a variable number
on their currently assigned reading level. In the third,
mockup, above, I'm showing what selecting a wrong answer
should look like. The answer itself should drop to 25% opacity,
and the term "Incorrect." shall display at the
end of it, along with the playing of a stinger that is meant
to indicate a wrong answer. You'll also notice that the
reward idenfication text loses opacity and is struckthrough,
to indicate it is no longer being awarded. Now, in order
to proceed to the next question, the student must select
a different answer. The student is not allowed to proceed
until selecting the correct answer—even though he
or she will be awarded no coins for ultimately getting it
right. There is no credit given for choosing the correct
answer on the second, third, or fourth tries. The first
choice always determines the coin award, as well as the
variable reading level adjustment.
Answering
Correctly
By
contrast, when the student selects the correct answer, as
shown in the fourth mockup, above, all other answers should
drop to 25% opacity, along with the correct answer highlighted
a bright green color scheme (see color map), and the term
"Correct!" showing at its end. In addition, a
"Right Answer" stinger plays, to further indicate
the correct answer has been chosen. This visual correct
answer state should hold for 3 seconds, and then the next
question shall automatically load in its place. Upon answering
the third question correctly, the user should continue to
either the "Poll Question" or the "Quiz Results"
stage.
Question
Answer Loading
When
a new question loads, let's load its answers in a cascading
fashion, much like Learningful's array slots load. That
should be a nice touch.
Back
Button
When
the "Back Button" is hovered over, it should show
"Return to Story" in text next to it and, when
clicked, should return the student to the story reading
module, to allow for re-reading of the story's text.
Power
Ups
Here's
where we get into some of the gamification of Readingful—the
"Power Ups" function. These buttons, 3 in total,
display in the upper right corner, and allow the reader
to pay a certain number of "Knowledge Coins" to
gain an advantage in order to have better odds of answering
the quiz question correctly on the first try. When a student
hovers over a "Power Up" button, its title, and
number of coins it costs to purchase it, is revealed to
the left, as shown in the fifth mockup above. When the student
clicks one of them, the function should be implemented,
and the number of coins deducted from the student's balance
of them. To show that the correct number of coins has been
deducted, when a purchase is made, the "Power Ups"
button menu should fade out, and the student's "Profile
Module" should fade in, to show the deduction happen
with a cash register animation and sound effect, as shown
in the sixth mockup, above. Then, once complete, said module
should fade back out, to be replaced with the "Power
Ups" menu once again, followed by the effectuation
of the action that was purchased.
These
"Power Ups" will cost varying amounts of coins,
depending on the question, and will be set by the admin
when publishing a story in the "Story Package."
The "Power Up" buttons begin at 75% opacity when
available, and gain 100% opacity on hover, 50% on click
(all via transparency in colors). After any one of "Power
Ups" is used, it shall be brought to 25% opacity (again,
via transparency in the set color), so as to indicate it
is no longer available, as shown in the seventh mockup,
above. Students may only buy each option once for each question.
If students don't have enough coins saved to buy an option,
it should be similarly faded out to the inactive state.
In
addition to being awarded a minimum of 1 coin for each question
answered correctly on the first try, students shall also
earn 5 bonus coins for "mastering" a quiz (getting
all 3 questions right on the first try). This is what will
help make it occasionally a good idea for students to spend
coins on these cheats. For example, if a student is on his
or her last question of the 3, and is torn between which
answer is correct, it may be worth it to spend a coin to
eliminate an answer, and another to receive a hint. It's
a way for the student to hedge his or her bet, so to speak,
and guarantee he or she will walk away with the bonus coins,
while only spending one or two coins, as opposed to no bonus
coins. The same would be true for questions that are worth
more than 1 coin to answer correctly on the first try. Such
gamification should be fairly motivating.
New
Question
When
a student clicks or taps this "Power Up" button,
which uses the "lightning bolt" symbol, and displays
for each multiple choice quiz question, the entire question
and answer set shall fade out, to be replaced with an alternate
question chosen randomly from those still available. Although
each story or article on Readingful will only show 3 questions
for each quiz attempt, there will be more questions written
(at least 5 that can be shown to each grade level). If there
is no alternate question that can be subbed in, this "Power
Up" option should be brought to 25% opacity and made
inactive.
Eliminate
an Answer
When
a student clicks or taps this "Power Up" button,
which uses the "skull" symbol, and displays for
each multiple choice quiz question, one of the wrong answers
should drop to 25% opacity and become inactive—leaving
the remaining answers from which to choose. However, this
should obviously not affect whether or not the student has
chosen an answer correctly on the first try.
Take
a Hint
When
a student clicks or taps this "Power Up" button,
which uses the "speech bubble" symbol, and displays
for each multiple choice quiz question, the student receives
a text based hint regarding which answer is correct, as
shown in the seventh mockup, above. In this example, the
hint is "Feet don't fail me now." which should
indicate to the student that the choice regarding running
away is likely the correct answer. Once purchased, the hint
shall display between the question and the notification
regarding how many coins shall be awarded for the correct
answering of the question (which should slide downward,
to then fade in the hint text).
Note:
It's important that the text of the hint is masked so that
it can't, say, be viewed in a web browser's inspector. Students
will do anything to gain an edge. So, this text can't exist
preloaded into the front end of the platform in any discoverable
way.
Poll
Question
After
the student has answered all 3 regular multiple choice questions,
he or she should be presented with a "Poll Question,"
as shown in the eighth mockup, above. This question is structured
in the exact same way as the regular multiple choice question,
however it has no correct answer. Instead, when the student
selects an answer, he or she is presented with the percentages
of how many other Readingful users have selected said answer,
as shown in the ninth mockup, above.
Note:
Not all stories will have poll questions. If not, when the
student answers the third question, he or she should proceed
directly to the "Quiz Results" stage. In addition,
poll questions should only be included during the first
attempt at taking the quiz, not on retakings. Also, "Power
Up" buttons should be taken to their disabled states
during the "Poll Question."
Styling
Checklist:
Images
1.
Quiz Answer A: a.svg,
32 x 32
2.
Quiz Answer B: b.svg,
32 x 32
3.
Quiz Answer C: c.svg,
32 x 32
4.
Quiz Answer D: d.svg,
32 x 32
5.
Quiz Answer Letter: #FFFFFFBF
6.
Quiz Answer Letter Hover: #FFFFFF
7.
Quiz Answer Letter OnClick: #FFFFFF80
8.
Quiz Answer Letter Disabled: #FFFFFF40
9.
Quiz Answer Letter Correct: #FFFFFF
-NOTE:
Colors 5 to 9 represent images 1 to 4.
10.
Power Up 1 Icon: power_up_1.svg,
60 x 60
11.
Power Up 2 Icon: power_up_2.svg,
60 x 60
12.
Power Up 3 Icon: power_up_3.svg,
60 x 60
13.
Power Up Icon: #FFFFFFBF
14.
Power Up Icon Hover: #FFFFFF
15.
Power Up Icon OnClick: #FFFFFF80
16.
Power Up Icon Disabled: #FFFFFF4D
-NOTE:
Colors 13 to 16 represent images 10 to 12.
17.
Story Play Button: story_play_button.svg,
60 x 40, #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
18.
Story Play Button Hover: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
19.
Story Play Button OnClick: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
20.
Story Pause Button: story_pause_button.svg,
60 x 40, #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
21.
Story Pause Button Hover: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
22.
Story Pause Button OnClick: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
23.
Story Back Button: story_back_button.svg,
34 x 50, #FFFFFF40
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
24.
Story Back Button Hover: #FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
25.
Story Back ButtonOnClick: #FFFFFFBF
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
26.
Story Back Button Disabled: #FFFFFF1A
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
27.
Profile Module Knowledge Coin Icon Decrease: #FF573E
28.
Profile Module Knowledge Coin Balance Minus Sign:
minus_sign.svg, 10 x 16, #FF573E
Text:
MOCKUP
1:
1.
Story Passage Title: 4.8
rem, #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
2.
Quiz Subtitle: 2.8 rem,
#FFFFFF80
3.
Quiz Question Text: 2.4 rem,
#FFFFFF
4.
Quiz Question Reward Identification: 2.0
rem, #FFFFFF80
5.
Quiz Answer Button Text: 2.0
rem, #23262D
6.
Quiz Answer Button Text Hover: 2.0
rem, #23262D
7.
Quiz Answer Button Text OnClick: 2.0
rem, #23262D
MOCKUP
3:
1.
Quiz Question Answer Notification Incorrect: 2.2
rem, #FFFFFF40
2.
Quiz Answer Button Text Disabled: 2.0
rem, #23262D
3.
Quiz Question Reward Identification Disabled: 2.0
rem, #FFFFFF80
MOCKUP
4:
1.
Quiz Question Answer Notification Correct: 2.2
rem, #FFFFFF80
2.
Quiz Answer Button Text Correct: 2.0
rem, #23262D
MOCKUP
5:
1.
Power Up Title Text: 2.4
rem, #FFFFFF
2.
Power Up Title Text OnClick: 2.4
rem, #FFFFFF80
3.
Power Up Value Identification Text: 2.0
rem, #FFFFFF80
4.
Power Up Value Identification Text OnClick: 2.0
rem, #FFFFFF40
MOCKUP
6:
1.
Profile Module Knowledge Coin Balance Decrease:
2.0 rem, ##FF573E
MOCKUP
7:
1.
Power Up Hint Text: 2.2 rem,
#88B6FF
Objects:
1.
Quiz Answer Button Background: Variable
x 50, #FFFFFFBF
2.
Quiz Answer Button Background Hover: Variable
x 50, #FFFFFF
3.
Quiz Answer Button Background OnClick: Variable
x 50, #FFFFFF80
4.
Quiz Answer Button Background Disabled: Variable
x 50, #FFFFFF40
5.
Quiz Answer Button Background Correct: Variable
x 50, #69FFAD
6.
Quiz Answer Letter Background 1: 32
x 32, #F9CE5EBF
7.
Quiz Answer Letter Background 1 Hover: 32
x 32, #F9CE5E
8.
Quiz Answer Letter Background 1 OnClick: 32
x 32, #F9CE5E80
9.
Quiz Answer Letter Background 1 Disabled: 32
x 32, #F9CE5E40
10.
Quiz Answer Letter Background 2: 32
x 32, #12E3E4BF
11.
Quiz Answer Letter Background 2 Hover: 32
x 32, #12E3E4
12.
Quiz Answer Letter Background 2 OnClick: 32
x 32, #12E3E480
13.
Quiz Answer Letter Background 2 Disabled: 32
x 32, #12E3E440
14.
Quiz Answer Letter Background 3: 32
x 32, #D179E0BF
15.
Quiz Answer Letter Background 3 Hover: 32
x 32, #D179E0
16.
Quiz Answer Letter Background 3 OnClick: 32
x 32, #D179E080
17.
Quiz Answer Letter Background 3 Disabled: 32
x 32, #D179E040
18.
Quiz Answer Letter Background 4: 32
x 32, #FF8446BF
19.
Quiz Answer Letter Background 4 Hover: 32
x 32, #FF8446
20.
Quiz Answer Letter Background 4 OnClick: 32
x 32, #FF844680
21.
Quiz Answer Letter Background 4 Disabled: 32
x 32, #FF844640
22.
Quiz Answer Letter Background Correct: 32
x 32, #1BCE78
23.
Power Up Button Background 1: 60
x 60, #EA92FFBF
24.
Power Up Button Background 1 Hover: 60
x 60, #EA92FF
25.
Power Up Button Background 1 OnClick: 60
x 60, #EA92FF80
26.
Power Up Button Background 1 Disabled: 60
x 60, #EA92FF40
27.
Power Up Button Background 2: 60
x 60, #5CE8FFBF
28.
Power Up Button Background 2 Hover: 60
x 60, #5CE8FF
29.
Power Up Button Background 2 OnClick: 60
x 60, #5CE8FF80
30.
Power Up Button Background 2 Disabled: 60
x 60, #5CE8FF40
31.
Power Up Button Background 3: 60
x 60, #ADFF45BF
32.
Power Up Button Background 3 Hover: 60
x 60, #ADFF45
33.
Power Up Button Background 3 OnClick: 60
x 60, #ADFF4580
34.
Power Up Button Background 3 Disabled: 60
x 60, #ADFF4540
|
