Search

When a student taps or clicks the word "Search" in the lower left of this view, it should be replaced with an active text cursor, to allow the user to type in the same font and size text, along with the "Story Selection Array" fading out, to be replaced with the "Search Results" module, as shown in the first mockup, above. In addition, to the direct upper right of the cursor is an "X" button which should close the "Search" module and return the "Story Selection Array."

Search Function

The search function itselfshould look for a match of the typed word or phrase in story titles, synopses, and keywords. When the student stops typing, a "processing" animation, much like the one used for Learningful's payment button, should display beside it, as shown in the second mockup above, and if results are found, they should be displayed in the "Search Results" module, and the "active" story should come into focus in the "Story Library," as shown in the third mockup, above. Deleting the search term should reset the "Story Selection Array" back to its default view. Make sure in the heading to account for plurality of results ( Showing 1 result ). If there are fewer than 3 total results, show empty slots. If there are no results to display, print "No results found that match "dinosaurs" in the subtitle. Search should be limited to only texts within the student's assigned grade level, but should display all stories in every classification, combined (new, previously attempted, mastered). Limit search to 16 characters.

Processing Animation

The processing animation should have a minimum length of time it shows, even if results are instantly available. A couple of beats is likely ideal. This visually makes it seem like the search is working and also gives students a bit more time to type correctly, before results start to show, should they hesitate for a moment.

Guest Searching

For guests users on the homepage, limit search results to only those admin has marked as "public." And, lock the "Read It" button for any text that is not marked as a "sample" or "feature" prompt for account creation or login, as shown in the fourth mockup above.

Styling Checklist:

Images

1. Search Close Button, search_close_button.svg, 20 x 20, #FFFFFF40

2. Search Close Button Hover, #FFFFFF80

3. Search Close Button OnClick, #FFFFFFBF

4. Search Processing Icon: processing_dot.svg, 12 x 12, #FFFFFF

5. Story Access Restricted Icon: storylock.svg, 22 x 22, #FFFFFF80

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)

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)

5. Read It Button Text Disabled: 2.4 rem, #FFFFFF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

6. Story Selection Array Title: 3.8 rem, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

7. Story Selection Array Subtitle: 2.4 rem, #FFFFFFB3 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

8. Student Profile Name: 2.4 rem, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "PROFILE MODULE " SPECS)

9. Student Profile Knowledge Coin Icon: knowledge_coin_icon.svg, 12 x 16, #FFFFFFB3 (DUPLICATE, ORIGINAL SHOWN IN "PROFILE MODULE " SPECS)

10. Student Profile Knowledge Coin Amount: 2.0 rem, #FFFFFFB3 (DUPLICATE, ORIGINAL SHOWN IN "PROFILE MODULE " SPECS)

MOCKUP 2:

1. Search Text: 4.8 rem, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

MOCKUP 3:

1. Story Selection Array Search Results Subtitle Numeral: 2.4 rem, #FFFFFFB3

MOCKUP 4:

1. Story Selection Restriction Notification Text: 1.8 rem, #FFFFFFB3

2. Sign Up Button Text: 2.4 rem, #FFFFFF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

3. Sign Up Button Text Hover: 2.4 rem, #FFFFFFBF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

4. Sign Up Button Text OnClick: 2.4 rem, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

5. Login Button Text: 2.4 rem, #464D7F (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

6. Login Button Text Hover: 2.4 rem, #464D7FBF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

7. Login Button Text OnClick: 2.4 rem, #464D7F80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

Objects:

1. Story Selection Array Empty Background: 216 x 156, #FFFFFF26

2. Login Button Background: 104 x 50, #FFFFFF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

3. Login Button Background Hover: 104 x 50, #FFFFFFBF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

4. Login Button Background OnClick: 104 x 50, #FFFFFF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

5. Read It Button Background: 130 x 50, #6C96FF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

6. Read It Button Background Hover: 130 x 50, #6C96FFBF (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

7. Read It Button Background OnClick: 130 x 50, #6C96FF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)

8. Read It Button Background Disabled: 130 x 50, #6C96FF80 (DUPLICATE, ORIGINAL SHOWN IN "HOMEPAGE" SPECS)