12/14/2021 - This is now a project built in Roblox Cloud Studio.

https://developer.roblox.com/en-us/articles/premium-payouts

10/4/2019 - Pending Documentation overhaul
10/5/2019 - LearnUI will now extend to include computer science and economics. MathUI is now an archived iteration.
10/5/2019 - There will be a database, front end, and directory rework rolled out with properly written code (see Bumpp project).

Table of Contents

1.0 MathUI

2.0 What it is

3.0 Development Queue

4.0 Development Queue

5.0 Components

6.0 Database Design

7.0 The Point System

8.0 The Component Descriptions

1.0 MathUI

A mathematics learning platform. visit: https://mathui.firebaseapp.com

2.0 What it is

Components are built with React & Firestore
see: https://sheilf.github.io/LearnUI-Project-Proposal

3.0 Development Queue

1. Add state and events to Component Descriptions.
2. Implement point system

4.0 Naming Conventions

   Naming
  import *;
  
  
  //1.Call DB at top
  
  let db= firebase.firestore();
  let users = db.collection('users');

  //2. use class components.
  
  class GenericComponent extends Component{ 
      constructor(props){
          super(props)
          this.state={
            clicked: "clicked"
          }
          
          //3. bind events in constructor
          this.handleClick = this.handleClick.bind(this);
      }

      componentDidMount(){ //class function*/
  
  
          //4. use arrow functions/lambdas after class functions are called
          firebase.auth().onStateChanged(user => {
                this.setState({
                    currUser: user.uid
                })

           })
      }

      componentDidUpdate(){
          //alert("upward traversal")
      
      }


      handleClick(event){ //class function
          
          //5. Use the event object.
          alert(event.target.textContent)

          
      }
      
      render(){
          //6. className="NameOfClass"
          //7. See: flexborder.css for flex-combinations
          //8. Call event={this.handleEvent} //
          
          < div className="GenericComponent flex-combination" onClick={this.handleClick}>
                Generic Component text content
          < /div>
          `
      }


  
  

5.0 Components

Root

 <Session>
    <Banner />
    <School>
      [...<Classrooms route to Subject />]  //classrooms 1..12
    </School>        
 </Session>
 
 <Subject>
    <TopicList>
      <Topic route to StudyRoom />
    </TopicList>
  </Subject>
  
  
   <StudyRoom>
      <QuestionGenerator>
        [...<Question renders QuestionDisplay/>] //[1..10]
      </QuestionGenerator>
      
      <QuestionDisplay>
        <Form />
        <MathKeys />
      </QuestionDisplay>
      
      <Assistant>
        <NotesAssistant render Teacher/>
        <DiscussAssistant render Teacher/>
        <SessionAssistant render Teacher/>
        
        <Teacher render Notes : Discuss : Session />
          <Notes>
            <Card>
              <Sketch renders animation />
            <Card>
            <Content/>
          </Notes>
          
          <Discuss>
            <Post />
            <Forum>
              [...<Threads route to Threads/>] //1..n
            </Forum>
          </Discuss>
          
          <Session>
            <Video />  
          </Session>
          
         </Teacher>
      </Assistant>
    
   </StudyRoom>
   
   
   <Thread />
      <Sub-application with mathkey components />
   <Thread /> 

6.0 Database Design

7.0 The Point System

The point system is based off similar practices done by Khan Academy with mastery and energy points. Students can earn points by interacting with the question and awards by completing certain objectives. The points awarded is what is returned from the student's subscription to the program. A student essentially needs to only receive 3 of the 6 points to complete a question. This is still a 100% complete. This is entirely up the the student and their choice of participation. Simply put: more effort translates to more points. More points means more of the subscription donated.

Question interactions

6 Points per question

Visiting a question earns 1 point.

Attempting a question will earn one point. Answering correct on the first try will count the attempt and award a point for it.

Answering a question correct will earn a point.

Collecting a card from Notes will earn a point.

Receiving a helpful post or helpful reply will earn a point in Discussion.

Watching the video in its entirety will earn a point from Session.

Awards

Awards wil be based on a combination of efforts made by the student. A simple example would be receiving an Award for completing the Fundamentals course. Perhaps there are questions that students rate positively but are answered at 60% success. Students that answer these questions may receive particular rewards for doing that. Other users may gravitate to using a forum more often than other users who prefer video direction. There are rewards to be reaped for doing what you prefer.

The combinations are endless. The Awards will allow users to customize their math-bot profiles. There should be enough Awards that will allow users to feel proud of their achievements.

8.0 Component Descriptions

App

Contains:

1. Banner
2. Login

Props:

• None

App is a stateless presentation component that displays the landing page. Users are instructed to create their accounts.

Banner

Contains:

1. none

Props:

• heading
• subeading

Banner is a stateless presentation component that displays instructions for users to navigate the site

Login

Contains:

1. Redirect to Session

Props:

• none

Login component returns 3 options to register/login in using Google, Facebook, and Email

Session

Contains:

1. Navigate
2. Banner
3. School

Props:

• None

The session component is initiated after a user logs in. It renders the components necessary to select a course from our School component. It initiates the user's database on first login.

Navigate

Contains:

1. Link route to Stats

Props:

• from

Navigate component grants users three options: previous page, my stats page, and signout. The from prop will decide the color of the navigation icons (UI)

School

Contains

1. Classroom x12

Props:

• none

School component holds a set of Classroom components

Classroom

Contains:

1. Link route to Subject

Props:

• classroom
• name
• imgSrc

Classroom is a component that renders a link to its respective chapters. It's a presentational component containing a name and icon.

Subject

Contains:

1. Navigate
2. TopicList

Props:

• Routes from /session/:classroom, uses this.props.match.params.classroom

Subject contains a list of topics from the respective course.

TopicList

Contains

1. Topic

Props:

• classroom
• topics[]

TopicList generates a list of topics

Topic

contains:

1. Link route to respective Studyroom

Props:

• chapterCount
• classroom
• topic
• routemap

Topic is a component that renders an heading and image and sends you to the chapter's respective studyroom

StudyRoom

Contains

1. Navigate
2. QuestionGenerator
3. QuestionDisplay
4. Assistant

Props:

• match.params.classroom
• match.params.topic

StudyRoom is the parent component to the application. It renders a list of 10 questions, a question display, and an assistant and allows users to navigate between questions, trace and store performance/mastery actions to a database, answer questions, and use different assistant functions to learn more about the question.

QuestionGenerator

Contains

1. Question

Props:

• classroom
• chapter
• onQuestion
• questionSet

QuestionGenerator generates a list of 10 questions to be navigated by the user.

Question

Contains

1. none

Props:

• course
• chapter
• questionCount

The individual Questions generated by QuestionGenerator. Keeps track of user visits.

QuestionDisplay

Contains

1. TBD

Props:

• Chapter
• Course
• onQuestion

Displays the current question. Unclear as to what other components will be added (keyboard, etc)

Assistant

Contains:

1. Lectio
2. Tabula
3. Exempli
4. Teacher

Props:

• course
• chapter
• onQuestion
• displayState

Assistant is a parent component that contains the buttons that render the notes, videos, and forum resources

Lectio, Taula, Exempli

Contains

1. none

Props:

• none

Lectio(Notes), Tabula(Discussion board), and Exempli(Video) are button components

Teaher

Contains

1. Notes
2. TabulaFora -> rename to Discussion
3. Exempli -> rename to Example

Props:

• display
• course
• chapter
• onQuestion

Teacher renders the actual content of the button that the user chooses.

Notes

Contains

1. NoteCard
2. TBD

Props:

• course
• chapter
• onQuestion

Notes is the parent container of the content disiplay. It will get its contents from a database based on its course/chapter/question

NoteCard

Contains

1. Sketch
2. TBD

Props:

• course
• chapter
• onQuestion

Notecards are collectibles that award users points. It contains a canvas component

Sketch

Contains

1. none

Props:

• course
• chapter
• onQuestion

Sketch is a canvas component that renders an animation or drawing.

--

Discussion

Contains

1. ForumThread
2. ForumPost

Props:

• course
• chapter
• onQuestion

Discussion is the parent component to the forum and its functionality.

ForumThread

Contains:

1. Link route to ForumView

Props:

• course, chapter, question
• title
• id

Threads that a user can select to view the post and its comments.

ForumView TBD

Contains:

Props:

ForumPost

Contains:

1. TBD

Props:

• TBD

Allows a user to post a thread

Example, Stats, Keyboard TBD

Contains:

Props:

--

Contains:

Props: