Quiz
Results
Once
the student clicks the correct answer of the third question
during the story's quiz (or answers the "Poll Question,"
if available), he or she then moves on to the "Quiz
Results" stage, which displays to the student his or
her results of taking said quiz. This is a multi-part process
that shows the end results in 3 or 4 separate parts (depending
on whether the student has mastered the story or not): Checking,
Questions, Coins, and Avatars. The fourth part only showing
in the event of story mastery. When this process begins,
a new background image, with a slightly darker overlay,
should load in place of the background image used during
the quiz taking process, "results.webp."
Part
1: Checking
For
part 1 of the "Quiz Results" process, three modules
load onto the page, as shown in the first mockup, above.
First should come the upper left module (consisting of the
story title and subtitle). Second in the center module should
load a processing animation (vertically and horizontally
centered in the page). And, in the lower right, the text
"Checking your work..." should display. This beginning
state, with the processing animation, should hold for a
few beats simply to give students the appearance or feeling
that something is happening.
Note:
When these first 3 modules fade in onto the "Quiz Results"
page, let's load them in cascading fashion, beginning with
the subtitle, then questions, and then the "Continue"
module, one after the other.
Part
2: Questions
For
part 2 of the "Quiz Results" process, after the
"Checking" state displays, the "Questions"
stage begins, as shown in the second mockup, above. For
this stage, the center module containing the processing
animation should fade out, to be replaced by the "Quiz
Results Pictograph." This module consists of an image
that shows the number of quiz questions the student answered
correctly on the first try, represented by an image of 3
stars (one star showing for each correct question), as well
as text below it, the "Quiz Results Data Readout Text,"
to note said results. In the example shown in the first
mockup, the student has only answered 2 of the 3 questions
correctly, thus 3 stars are showing. The pictograph will
be one image. So, programatically, all that needs to be
done is to show the correct image (of 4 possibilities) based
on the student's performance (0, 1, 2, or 3 questions answered
correctly). In addition, the "Checking your work..."
text in the lower right should fade out, to be replaced
by a status message (which consists of a submit button prefaced
by a line of text, the "Quiz Results Story Status Notification
Text"). If the student has answered any questions incorrectly
(on the first try), the footer text should read "You
may retake this quiz in 24 hours." If the student has
answered all 3 questions correctly (on the first try), the
footer text should read "You have mastered this story.
Awesome!"
Note:
Let's add some variation with the second sentence of the
mastery line, replacing "Awesome!" with some additional
variations, chosen at random: Sweet!, Way to go!, Bravo!,
Well done!, Great job!, Nice work!, Nicely done!, Aww yeah!,
Fantastic!, Keep it up!, Excellent!, Superb!, Amazing!,
High five!, Spectacular!
Part
3: Coins
When
the student clicks the "Continue..." button in
Part 2, the "Quiz Results Pictograph" center module
should fade out, and the "Coins Awarded Pictograph"
center module should fade in, while everything else on the
page remains the same, as shown in the third mockup above.
This time, the pictograph represents the number of coins
the student has earned so far by trying to master the story.
By completing any one quiz, the student will have the ability
to collect up to 16 total coins (each question is given
a reward value in the story package upload of up to 5 coins).
This pictograph will likewise be a single image (albeit
with many more possibilities, as it shows icons for coins
awarded, placeholder icons for coins that could be or could
have been earned, and then finally blank placeholder containers
for slots not filled by either). The "Poll" question,
when available, always rewards 1 coin.
Note:
Each question a student is asked to answer while taking
a quiz may be worth a different number of knowledge coins
when answered correctly on the first try, and each story
is likely to have 5 questions or more, in total (even though
only 3 will be presented to the student). Also, one of the
"Power Ups" gives the student the ability to swap
out any one question for a new question. As such, each time
the student takes the quiz, the total number of achievable
knowledge coins collected may be different. However, during
subsequent re-takings of any quiz, any questions previously
answered correctly on the first try must be included, because
those knowledge coins have already been awarded.
If
the student has "Mastered" the quiz (answered
all 3 main quiz questions correctly on the first try), he
or she is awarded a certain number of bonus coins for scoring
100%, and is notified of this occurring by a second "Coins
Awarded Pictograph," after the first one displays,
as shown in the fourth mockup, above. If the quiz isn't
"Mastered," this second coins pictopgraph is skipped.
Part
4: Avatars
When
the student clicks the "Finish Quiz" button on
Stage 3, it should return him or her to the "Story
Library," as either at least 1 question was answered
incorrectly (on the first try), or the story that was just
read simply had no collectible avatars to unlock. However,
if the student has answered all 3 quiz questions correctly
(on the first try), and the story has at least 1 collectible
avatar that is unlocked, clicking the "Continue..."
button should instead fade out the "Coin" center
page module, and replace it with the "Collectible Avatar
Placard " module, so as to show the student the collectible
avatars that have been unlocked (and can thereafter be purchased
with knowledge coins in the "Avatar Store"). This
fourth stage is shown in the fifth mockup, above.
The
"Collectible Avatar Placard" module is merely
a container with the avatar's image, along with its title
beside it. The container should expand and contract to fit
both perfectly (as variation is needed due to the title's
character count). Some stories on Readingful will have 1
avatar that can be unlocked by mastering the story, others
will have 2 or 3. Some will have none. If there is more
than 1 avatar unlocked by a single story, the placard of
1 avatar should hold for 3 seconds, fade out, then show
the next, and so on, in repetative fashion, so as to cycle
through them. The text below the placard must be able to
account for the number of avatars, as well as make the word
"avatar" plural in that event.
A
Note On "Mastery"
While
students only get credit (earn coins, get a point increase/decrease),
for answering any quiz question correctly the very first
time they encounter the question (meaning if they answer
the same question again on subsequent quiz attempts, they
do not earn the associated coins, nor points), answering
the question correctly on the first answer selected during
subsequent attempts STILL COUNTS TOWARD MASTERY. "Mastery"
of a text is simply choosing the correct answer of all 3
quiz questions on the first try DURING ANY SINGLE QUIZ ATTEMPT,
whether or not the question has been encountered before.
As such, it will be routinely possible for a student to
"master" a text, yet not earn all possible coins
for the questions answered during the attempt, or any coins,
for that matter, (because he or she has tried the question
before, and on the first attempt, answered incorrectly).
This is an important distinction to make.
It
will be entirely possible for a student, upon mastering
a story, to only have earned the "bonus" coins
for the act of mastery.
Story
Library Return
Upon
the return to the "Story Library," after finishign
the quiz, let's show a cash register animation and sound,
to show the "Knowledge Coins" earned being added
to the student's balance, in the "Profile Module,"
as shown in the sixth mockup, above.
Styling
Checklist:
Images:
1.
Quiz Results Pictograph 1: quiz_results_pictograph_1.svg,
340 x 90
2.
Quiz Results Pictograph 2: quiz_results_pictograph_2.svg,
340 x 90
3.
Quiz Results Pictograph 3: quiz_results_pictograph_3.svg,
340 x 90
4.
Quiz Results Pictograph 4: quiz_results_pictograph_4.svg,
340 x 90
5
to 150. Coins Awarded Pictograph
1 to 146: coins_awarded_pictograph_0_of_3.svg
to
coins_awarded_pictograph_16_of_16.svg, 396 x 90
6.
Profile Module Knowledge Coin Icon Balance Increase:
#00D653
Text:
MOCKUP
1:
1.
Story Passage Title: 4.8
rem, #FFFFFF
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
2.
Quiz Subtitle: 2.8 rem,
#FFFFFF80
(DUPLICATE, ORIGINAL SHOWN IN "STORY" SPECS)
3.
Quiz Results Story Status Notification: 2.2
rem, #FFFFFF80
MOCKUP
2:
1.
Quiz Submit Button Text: 2.2
rem, #FFFFFF
2.
Quiz Submit Button Text Hover: 2.2
rem, #FFFFFFBF
3.
Quiz Submit Button Text OnClick: 2.2
rem, #FFFFFF80
4.
Quiz Results Data Readout: 2.4
rem, #FFFFFF
5.
Quiz Results Data Readout Accent: 2.4
rem, #78A9FF
MOCKUP
4:
1.
Quiz Results Avatar Title: 3.0
rem, #FFFFFF
MOCKUP
5:
1.
Profile Module Knowledge Coin Balance Increase:
2.0 rem, #00D653
Objects:
1.
Quiz Results Processing Animation Dot: 20
x 20, #FFFFFF
2.
Quiz Submit Button Background: 120
x 50, #669BFF
3.
Quiz Submit Button Background Hover: 120
x 50, #669BFFBF
4.
Quiz Submit Button Background OnClick: 120
x 50, #669BFF80
5.
Unlocked Avatar Background: Variable
x 90, #BAC1C6BF
|
