(Assigned) I04 - Frontend Development

Background

Global Learning XPRIZE is a competition challenging teams to develop open-source software that will enable children with limited access to schooling to teach themselves basic reading, writing and arithmetic. XPRIZE, a non-profit organization, is the world’s leader in designing and managing incentive prize competitions for the benefit of humanity.

Midnight Illusions Ltd. is a +20 year strong digital media solutions company specializing in award-winning start-to-finish mobile application development services for all major mobile platforms.

The Global Learning XPRIZE is a crowdsourced problem designed for the world to solve. Midnight Illusions has taken on the challenge of addressing this problem by crowdsourcing the solution.

We have conceptually developed our solution, known as The ShiraX System™, from the ground up specifically for the Global Learning XPRIZE competition.  The System will not only achieve the competition goals but has massive potential to greatly exceed them.  And we look forward to adding YOU to our team by working together to fully realize this System!

What is The ShiraX System™ ?

The Cocktail Party One-Liner

The ShiraX System™ is a web-based magic toolbox that will allow anyone to easily create and share their educational app with the world.

The Geek Meetup Two-Liner

The Super Helpful Intelligent Resource Architect (Shira) X System™ (or simply, “ShiraX”) is an open source layperson-friendly modular platform that facilitates the creation of educational apps for Android, iOS, Web, PC, and Mac deployment.

ShiraX blends a highly-intuitive User Interface (UI) with strong User Experience (UX) design principles and strong MVC architecture at its core.

Prize Payout Structure

PLEASE NOTE THAT THIS IS AN INDIRECTLY FUNDED CHALLENGE
Awarding of any prizes in any of The ShiraX Challenges is contingent on the Midnight Illusions Ltd. team being chosen as either a Finalist or Winner in the Global Learning XPRIZE.

The following breaks down the potential prize amount ranges:

Submissions and Team Invites

We will evaluate all submissions, comparing against this Challenge's technical requirements and all other judging factors.  See the Guidelines tab for this Challenge for more information.

Innovator submissions will be short-listed and organized by the top performing submission, onward.  The Top Innovator will be contacted first.  A list of Finalists will also be assembled, in the event that the Top Innovator is unable to continue.

An invitation will be sent to the Top Innovator submission for this Challenge to officially join Team "Midnight Illusions" in the Global Learning XPRIZE Challenge.  The Innovator must meet all Global Learning XPRIZE requirements and sign both an agreement with Midnight Illusions Ltd. and a Team Member agreement with Global Learning XPRIZE.  All documentation and forms will be supplied.  

Should the top Innovator decline the invite, the invitation will then be sent to the Finalist(s) in the order of their evaluation in this Challenge.

Open Source.  Variable IP.

Should our team earn the status of Finalist or Winner, our collective software solution will be open sourced to the world.  As per Global Learning XPRIZE regulations, IP is retained by the team (Midnight Illusions).

Shoud our team not earn Finalist or Winner status, our collective software solution will still be open sourced to the world.  You, the Innovator, will retain the IP related to your code.

Post-HeroX Challenge &
Global Learning XPRIZE Timeline

The ShiraX Challenges on HeroX represent one key component of our solution submission to Global Learning XPRIZE.  After the winners are announced for each HeroX Challenge, with your assistance as an official Team Member we will continue to enhance the System to meet the requirements of Global Learning XPRIZE.

After submission, we wait to hear back from Global Learning XPRIZE to learn if we have made it the semi-finalist level.  In the interim, solution development will continue, as we are able to submit updated software at each evaluation milestone.

Should (no....WHEN!) we make it to the Finalist announcement (currently July 2017), we will arrange prize payout with each ShiraX Challenges HeroX sub-challenge Winner, as per the "Finalist" Prize Payout Structure outlined above.  Solution development will further continue, with your assistance as an official Teal Member from July 2017 to September 2018.  We will have several opportunities to submitted updated code while our solution is being tested in the field (with appox. 800 children in several villages in Tanzania), further enhancing our opportunity to fully win Global Learning XPRIZE.

Should (no...WHEN!) we make it to the Global Learning XPRIZE Grand Prize announcement that team Midnight Illusions has W-O-N (currently April 2019), we will arrange prize payout with each ShiraX Challenges HeroX sub-challenge Winner, as per the "Winner" Prize Payout structure outlined above.

And of course, we'll have to arrange some sort of massive party to celebrate!  ;)

Additional Rules

Who can participate:
The Challenge is open to individuals and teams. To be eligible to compete, you must comply with all the terms of the Challenge as defined in the Challenge-Specific Agreement.

Selection of Winner:
Based on the winning criteria, one or more prizes will be allocated, pending the performance of the Midnight Illusions team in the Global Learning XPRIZE.  See "Prize Payout Structure", above.  In the case of a tie, the winner will be selected at the discretion of the Judging Panel.

Submissions:
All Team submission materials must be submitted online on or before the Submission Deadline indicated in the Timeline. No submissions will be accepted after this time. Incomplete submissions will not be accepted. All submissions must be received online, via the Challenge website, and all uploads can be in PDF format only. Submission reporting requirements are detailed in Judging.

Challenge Guidelines are subject to change. Registered competitors will receive notification when changes are made, however, we highly encourage you to visit the Challenge Site often to review updates.

The ShiraX Challenges are an ambitious plan for compassionate coders to
create a self-teaching educational system that will significantly improve
the status quo of impoverished girls around the world,
by providing hope, freedom, and possibility.

Join  •  Code  •  Innovate  •  Win!

Content Creation -- UI/UX Layer

Description

The Content Creation -- UI/UX Layer will present itself as a “canvas” to the Creator, with a minimalist User Interface (UI) and context-aware User Experience (UX) design elements.  This will allow the Creator to simply focus on creating their educational content.

Create the Following Features/Functions:

• General Info
  • Minimalist User Interface (UI) and context-aware User Experience (UX) design
    • Appropriate Tools/Toolbars appear, based on the Creator’s selections/actions
      e.g., Creator selects text, text editor options appear right beside their selection
  • Once complete, create reference material/guidelines outlining how the UI/UX elements can be located and used by coders for other “Content Creation…” task.
• Global Buttons
  NOTE:  Global Buttons are larger and separate from Toolbars and Toolbar Buttons, likely all grouped together in one location.
  • Button for “New Screen”
    • UI for New Screen Popup
  • Button for “Multi-step Undo”
  • Button for “Multi-step Redo”
     
  • Button for “Access Media Library - Images Manager”
  • Button for “Access Media Library - Audio Manager”
  • Button for “Access Testing Manager”
  • Button for “Access Screen Settings” in the Screen Manager System
  • Button for “Software Bookshelf”
    • UI for Software Bookshelf Popup
  • Button for “Simulator”
     
  • Button for "Screen Settings"
    • ​UI for Screen Settings
• Tools/Toolbars
  • And......Action!
    • Button for "Apply Action" to a selected Screen element
      • UI for "Apply Action" Popup
        • Navigate to another Screen
        • Play a sound
        • Display an image
        • Display a character
        • Display a word
        • Display a sentence
        • Run a test
        • Run a Story
        • Trigger front camera (to take photo)
        • Trigger rear camera (to take photo)
        • Record child's voice
        • Record Selfie video
        • Record World video
        • Run a Buffet item
        • Run a calculation
        • Display the scratchpad
        • Run English Speech to Text (STT)
        • Run English Text to Speech (TTS)
        • Run Swahili Speech to Text (STT)
        • Run Swahili Text to Speech (TTS)
        • Load a website
        • Run In-App Session Manager
        • Run User Account Manager
        • Run a custom Action
  • Drawing/Images
    • Button for Select
    • Button for Rectangle
    • Button for Ellipse
    • Button for Line
    • Button for Freeform Line
    • Button for Fill
    • Button for Shapes (star, diamond, etc.)
    • Button for Brush (various brushes and thicknesses)
    • Button for Image Filter
      • UI for Image Filter Popup
  • Text
    • Button for Placing Text (Inlude “WYSIWYG Editor” beside placed text (font, font size, alignment, bold/italics/underline)
    • Button for “Access Character Manager”
    • Button for “Access Word Manager”
    • Button for “Access Sentence Manager”
    • Button for "Scratchpad"
  • Calculation
    • Button for "Create Addition Sequence"
    • Button for "Create Subtraction Sequence"
    • Button for "Create Multiplication Sequence"
    • Button for "Create Division Sequence"
    • Button for "Create Fraction Sequence" (for v1.5)
    • Button for "Create Exponent Sequence" (for v1.5)
    • Button for "Create Percentage Sequence" (for v1.5)
    • Button for "Create Square Root Sequence" (for v1.5)
    • Button for "Create Formula Sequence" (for v1.5)
    • Button for "Create Greater/Less Than Sequence" (for v1.5)
    • UI for all Sequence Popups
    • Button for "Scratchpad"
  • Storytelling
    • Button "New Story" -- triggers “Story Settings”
      • User Interface for Story Settings Popup
        • Enter Story name
        • Author Name
        • About Author (optional)
        • Copyright Info.
        • Add book cover image.
        • Page flip graphics (prev/next).  
          • Choose one set, from a selection.
          • Add custom prev/next image
    • Button for “New Page" (New StorytellingScreen)
      • UI for Popup
        • Identical functionality to the “New Screen” global button
    • Button for “Add Background Image”
      • UI for post-image selection
        • Prompt Creator to select whether background image displays across ALL Screens in the Storytelling deck, or through specific Screens only, e.g, Screens 1-6, out of 12.
    • Button for "Add Text"
      • Triggers standard Add Text WYSIWYG Editor
    • Button for "Add Image"
      • Triggers Image Manager
    • Button for “Add Background Music”
      • UI for post-music selection
        • Prompt Creator to select whether background music plays across ALL Screens in the Storytelling deck, or through specific Screens only, e.g, Screens 1-6, out of 12.
        • Prompt if music auto-repeats.
    • Button for “Record Audio” (via device microphone)
       
    • Button for Text to Speech player
      • Dictates text on this Screen
      • Includes Play/Pause/Restart Buttons
  • Community
    • Button for “Activate Selfie Cam”
      • Record Image into am Image Gallery, for this Screen.
    • Button for “Activate World Cam”
      • Record Image into an Image Gallery, for this Screen.
    • Button for “Record My Voice”
      • Record Audio into an Audio Gallery, for this Screen.
    • Button for “Record My Selfie Video”
      • Record Video into a Video Gallery, for this Screen.
    • Button for “Record My World Video"
      • Record Video into a Video Gallery, for this Screen.
• Command Line Interface (CLI)
  • A simple text-field at the bottom/top of the screen with a button to “GO”.

Content Creation -- Core System

Description

As with any kick-ass Content Management System (CMS), the main content development area on ShiraX will have a variety of core tools that the Creator can use to add and edit text, images, audio, and more.  The Creator will also be able to access other areas of the system, as they build their custom educational app.

Create the Following Features/Functions:

• Incorporate the UI/UX elements for all buttons/toolbars/tools from the Content Creation -- UI/UX Layer task.
  • Appropriate Tools/Toolbars appear, based on the Creator’s selections/actions
    e.g., Creator selects text, text editor options appear right beside their selection
• Menus
  • Admin
  • Edit
  • Insert
  • Arrange
  • Help
  • Logout
• Global Buttons
  (Grey horizontal toolbar at the top of the screen, under the menu bar)
  • New Screen
    • Auto-fill category Type/Level from existing Screen
    • Option to link to existing Screen
  • Multi-step Undo
     
  • Multi-step Redo
     
  • Access Media Library - Images Manager 
    - (See the Media Library - Images Manager task  in the “Warm Up” Challenge category).
     
  • Access Media Library - Audio Manager 
    - (See the Media Library - Audio Manager task in the “Warm Up” Challenge category).
     
  • Access Testing Manager 
    - (See the Testing Manager task in the “A+, 100%, 10/10” Challenge category).
     
  • Software Bookshelf
    • The Software Bookshelf contains ready-to-go packs that can be directly integrated into a Screen.  Currently we are aiming to have two (2) Software Bookshelf items available - Offline English Wikipedia and Offline Swahili Wikipedia
      - (See these 2 task in the "Create Create Create" Challenge category)
    • List all available software items in the Software Bookshelf.  Creator selects an item.
    • Select default button that the child would press to activate the Software Bookshelf item.
      • Optionally select an alternate image via the Media Library - Images Manager)
        - (See the Media Library - Images Manager task in the “Warm Up” Challenge category).
  • Simulator
    • Launch the Simulator.  
      - (See the Simulator task in the “Create Create Create” Challenge category).
       
  • Generate App
    • Launch the Preflight Manager or app generator popup
      - (See the Preflight Manager task in the "Take Flight" Challenge category).
      - (See the Android .apk Generator task in the "Take Flight" Challenge category).
      - (See the iOS .ipa Generator task in the "Take Flight" Challenge category).
      - Other Generators (HTML5, Windows PC, MacOS) to be added in the next version.
  • ​Screen Navigator, Screen Settings (NOW LOCATED BOTTOM RIGHT)
    - Display Current Screen's name (ScreenName)
    - Click to expand tab and show all Screens for this Project.  Click a Screen to load it
    - Click the gears icon beside the ScreenName for Screen settings.  Change Screen name, description, etc.  In addition, the Creator can click an "Apply Action" button to apply one or more "Actions" to the actual Screen, when it first loads.
      - See the "And....Action!" sub-section in the "Tools/Toolbars" section, below.
    - (See the Screen Manager System task in the “Create Create Create” Challenge category for additional reference).
• Tools/Toolbars
  • And…...Action!
    • Creator selects a Screen element, e.g., a green box, and can apply one or more "Actions" to it, i.e., "Element Action"
    • Available Actions:
      • Navigate to another Screen
      • Play a sound
        - Integrates with the Media Library - Audio Manager
        - (See the Media Library - Audio Manager task in the “Warm Up” Challenge category).
      • Display an image
        - Integrates with the Media Library - Image Manager
        - (See the Media Library - Images Manager task in the “Warm Up” Challenge category).
      • Display a character from the Character Manager
        - Integrates with the Character Manager
        - (See the Character Manager task in the "Foundation" Challenge category)
      • Display a word from the Word Manager
        - Integrates with the Word Manager
        - (See the Word Manager task in the "Foundation" Challenge category)
      • Display a sentence from the Sentence Manager
        - Integrates with the Sentence Manager
        - (See the Sentence Manager task in the "Foundation" Challenge category)
      • Run a template or task from the Testing Manager
        - Integrates with the Template Manager
        - (See the Template Manager task in the "A+, 100%, 10 out of 10" Challenge category)
      • Run a Story
        - Integrates with the Content Creation -- Storytelling System
        - (See the Content Creation -- Storytelling System task in the "Create Create Create" Challenge category)
      • Trigger a device's front camera (Selfie Cam)
        - (See the Content Creation -- Community System task in the "Create Create Create" Challenge category)
      • Trigger a device's rear camera (World Cam)
        - (See the Content Creation -- Community System task in the "Create Create Create" Challenge category)
      • Record child's voice
        - (See the Content Creation -- Community System task in the "Create Create Create" Challenge category)
      • Record Selfie Video (front camera)
        - (See the Content Creation -- Community System task in the "Create Create Create" Challenge category)
      • Record World Video (back camera)
        - (See the Content Creation -- Community System task in the "Create Create Create" Challenge category)
      • Run a Software Bookshelf item
        - See Software Bookshelf, above, in the Global Buttons section
      • Run a calculation
      • Display the scratchpad
        - see next section, below
      • Run English Speech to Text (STT)
        - Integrates with the English Speech to Text (STT) Natural Language Framework
        - Child speaks, app displays text             
        - (See the English Speech to Text (STT) Natural Language Framework task in the "Foundation" Challenge category)
      • Run English Text to Speech (TTS)
        - Integrates with the English Text to Speech (STT) Natural Language Framework
        - Child types, app speaks
        - (See the English Text to Speech (STT) Natural Language Framework task in the "Foundation" Challenge category)
      • Run Swahili Speech to Text (STT)
        - Integrates with the Swahili Speech to Text (STT) Natural Language Framework
        - Child speaks, app displays text
        - (See the Swahili Speech to Text (STT) Natural Language Framework task in the "Foundation" Challenge category)
      • Run Swahili Text to Speech (TTS)
        - Integrates with the Swahili Text to Speech (STT) Natural Language Framework
        - Child types, app speaks
        - (See the Swahili Text to Speech (STT) Natural Language Framework task in the "Foundation" Challenge category)
      • Load a website
        • Display warning that Internet access may not be available on the child's device when app is in use.
      • Run In-App Session Manager
      • Run User Account Manager
        • Allows child to logout, change accounts, log back in
      • Run a custom Action
      • Additional Actions limited only by your imagination!
    • Creator can set up and run multiple Actions at once
    • Creator can check off whether the Action(s) will be applied to the selected element (if selected) or should be applied to the Screen
      • If applied to the selected element, the child will trigger the Action(s) when they tap/click the element
      • If applied to the Screen, Creator can select whether to run the Action(s) upon screen load, upon screen exit, or after "x" number of seconds after the Screen loads, or ...
  • Drawing/Images
    • Shapes, lines, brushes, fills, etc.
    • Image Filters
      • Apply filters...Instagram style
  • Text 
    • WYSIWYG Editor
    • Fonts - 10 fonts?  30?  50+ ?!
      NOTE:  You must provide licensing proof that covers each font individually for unlimited, royalty-free distribution.  Submissions missing this information will be rejected.
  • Access Character Manager
    • Select/drag character on to Canvas
    • Also see the Character Manager task in the "Foundation" Challenge category
  • Access Word Manager
    • Select/drag word on to Canvas
    • Also see the Word Manager task in the "Foundation" Challenge category
  • Access Sentence Manager
    • Select/drag sentence on to Canvas
    • Also see the Sentence Manager task in the "Foundation" Challenge category
  • Scratchpad
    • Creator draws a rectangular area on the screen where the child can scratch out notes while they learn.
    • Child uses this area to practice writing.
      • Must include a “wipe the pad” tool.
  • Calculation
    • Number layouts for addition / subtraction / multiplication / division
    • Symbols
    • Scratchpad
      • Creator draws a rectangular area on the screen where the child can scratch out notes while they learn.
      • Child uses this area to practice.  
      • Must include a “wipe the pad” tool.
• Command Line Interface (CLI)
  • Incorporate the Command Line Interface (CLI) Framework, which can be triggered on demand.  See the Command Line Interface (CLI) Framework task in the “Warm Up” Challenge category.
• Persistent Auto-Save.
  • Just like a Google Doc, the system is constantly saving the Project.
• Persistent Screen thumbnail creation
  • Create reference material/guidelines outlining how the Screen thumbnail can be accessed by other components/modules/plugins of the system.  
     

Content Creation -- Storytelling System

Description

Since many cultures around the world use storytelling as a core educational tool, ShiraX will be built from the ground up to facilitate the easy creation of stories.  

It is through storytelling that cultural history, values, beliefs, and ways of life are conveyed.  By connecting the traditional directly with the digital, ShiraX will help bridge the gap between oral and printed storytelling.

Create the Following Features/Functions:

• Incorporate the UI/UX elements for all buttons/toolbars/tools from the Content Creation -- UI/UX Layer task
• Story Settings
  • Enter Story name
  • Author Name
  • About Author (optional)
  • Copyright Info.
  • Add book cover image.
    - Accesses the Media Library - Images Manager (see the Media Library - Images Manager task in the “Warm Up” Challenge category).
  • Page flip graphics (prev/next).  
    • Choose one set, from a selection.
    • Add custom prev/next image
      - Accesses the Media Library - Images Manager (see the Media Library - Images Manager task in the “Warm Up” Challenge category).
• Directly Create new Screen (for the next page)
  • Identical functionality to the “New Screen” global button
  • Automatically links back to previous Screen
• Add Background Image  
  - Accesses the Media Library - Images Manager (see the Media Library - Images Manager task in the “Warm Up” Challenge category).
  • Prompt Creator to select whether background image displays across ALL Screens in the Storytelling deck, or through specific Screens only, e.g, Screens 1-6, out of 12.
• Add Background Music  
  - Accesses the Media Library - Audio Manager (see the Media Library - Audio Manager task in the “Warm Up” Challenge category).
  • Prompt Creator to select whether background music plays across ALL Screens in the Storytelling deck, or through specific Screens only, e.g, Screens 1-6, out of 12.
  • Prompt if music auto-repeats.
• Directly record audio, via device microphone.
  • Add recording to Media Library Manager, under “Personal Recordings” section.
• Directly add sentence.
  • A blend of text input and audio recording.  This function allows the Creator to enter a sentence and then assign an audio recording to that sentence.  
  • Link to prev/next sentence on this Screen, by selecting a sentence from a list.  This allows for seamless and “natural” audio storytelling.
  • Option to highlight sentence as the associated audio recording plays.
• Super Bonus Points 1:  Incorporate Text-to-Speech (TTS) functionality, preferably from the English Text to Speech (TTS) Natural Language Framework task, in the “Foundation” Challenge category. 
  • The Creator can choose to activate TTS for any text element by checking a box on a modified text editor popup.  This would create an additional graphical item beside the text that the child can tap to activate the TTS.
• Super Bonus Points 2:  Multi-Language Text
  • Add/edit Storytelling written text in multiple languages, while retaining the same images and background music.
  • Add “Default Language” entry to the Screen Manager System
• Super Bonus Points 3:  Multi-Language Audio
  • Add/manage Storytelling voice recordings in multiple languages, while retaining the same images and background music.
  • Add “Default Language” entry to the Screen Manager System

Content Creation -- Community System

Description

One of our main pedagogical approaches to Global Learning XPRIZE is to teach children while they are engaged in their various day-to-day activities and to enmesh learning with FUN, primarily through multi-sensory experiential activities.

While children record, document, and interact with their environment and their community, they will be “learning by doing” acquiring educational knowledge in the process.

We are modeling this component of ShiraX after the One Laptop Per Child initiative, which explains that “... [placing] an emphasis on software tools for exploring and expressing, rather than instruction. Love is a better master than duty. Using [digital tools] as the agency for engaging children in constructing knowledge based upon their personal interests and providing them tools for sharing and critiquing these constructions will lead them to become learners and teachers.” (our emphasis).

This experiential, community-based approach has several key advantages:

1. Ensures long term usage of the educational app
2. Prevents app usage boredom
3. Engages the wider communal village in the child’s educational adventure

Create the Following Features/Functions:

• Incorporate the UI/UX elements for all buttons/toolbars/tools from the Content Creation -- UI/UX Layer task
• Selfie Cam
  • Creator positions a “Selfie Cam” button on the screen
  • When the child presses this button, the device’s front (selfie) camera is triggered
    • Functionality includes erase and retake
• World Cam
  • Creator positions a “World Cam” button on the screen
  • When the child presses this button, the device’s rear camera is triggered
    • Functionality includes erase and retake
• Record My Voice
  • Creator positions a “Record My Voice” button on the screen
  • When the child presses this button, the device records their voice.
    • Functionality includes erase and rerecord
• Record My Selfie Video
  • Creator positions a “Record My Selfie Video” button on the screen
  • When the child presses this button, the device’s front (selfie) camera is triggered, in video mode
    • Functionality includes erase and rerecord
• Record My World Video
  • Creator positions a “Record My World Video” button on the screen
  • When the child presses this button, the device’s rear camera is triggered, in video mode
    • Functionality includes erase and rerecord

Technical Code Guidelines
 

• Code is built using Sass/Jade, React.JS, JQuery, and Bootstrap
• Code integrates with backend classes/API's, as required
• Responsive (mobile) layout.
• JavaScript allowed
• MySQL Database
• No Adobe Flash
• No Java

Code Licensing Requirements
 

• Code must be released under the Apache License 2.0 and contain the boilerplate notice at the beginning of each file in your solution.
• Content must be released under the Creative Commons CC-BY 4.0 license
• Any existing code/libraries from other sources must be released under an approved Open Source Institute (OSI) license listed in the OSI Open Source Licenses by Category index at opensource.org/licenses/category
• This licensing must be granted by September 31, 2016 or earlier.
• Any third party code must also be released under a license that does not conflict with Team Midnight Illusions licensing its own code under the Apache License, 2.0 as part of the same application.  
• NOTE:  Some open source licenses (such as the GNU Public License) do not meet this criterion, as they require any derivative work to be released under the same license.