Flows

Authentication

Sign In To Newly Registered Account

• navigate to sign in page
• enter username and password fields
• submit form using 'Sign In' button
• redirect to totp setup page
• scan qr code, or use link to associate authentication software (google auth, microsoft auth, etc.)
• fetch mfa code
• enter mfa code
• submit form using 'Sign In' button
• redirect to landing page

Sign In To Already Setup Account

• navigate to sign in page
• enter username and password fields
• submit form using 'Sign In' button
• redirect to totp or sms based mfa
• enter mfa code
• submit form using 'Sign In' button
• redirect to landing page

Register And Create Account

• navigate to sign in page
• click on 'Register' button
• redirect to registration page
• enter valid username, email, password, and confirm password fields
• submit form using 'Register' button
• redirect to verify page with username
• fetch verification pin from email
• enter verification pin
• submit form using 'Register' button
• redirect to sign in page

Forgot Password, Reset Password

• navigate to sign in page
• click on 'Forgot Password' link
• redirect to initiate reset password page
• enter username
• submit form using 'Submit' button
• redirect to reset password page
• fetch verification pin from email
• enter verification pin, new password, and new password confirm fields
• submit form using 'Reset' button
• redirect to sign in page

Verify Account From Sign In Page

• navigate to sign in page
• click on 'Verify Account' button
• redirect to verify page without username
• fetch verification pin from email
• enter username and verification pin
• submit form using 'Register' button
• redirect to sign in page

Content Creation

Create New Widget

• navigate to landing page using 'Sign In To Newly Registered Account' flow or 'Sign In To Already Setup Account' flow
• click on 'Editor' button
• redirect to editor dashboard page
• click on 'Widget' button, under 'Create New'
• redirect to widget editor page

Open Existing Widget

• navigate to landing page using 'Sign In To Newly Registered Account' flow or 'Sign In To Already Setup Account' flow
• click on 'Editor' button
• redirect to editor dashboard page
• click on target widget button, under 'Widgets'
• redirect to widget editor page

Add Parameter To Widget

• Navigate to target widget using Open Existing Widget flow
• Click on ‘meta’ tab
• Display widget meta editor
• Click on ‘+’ button, below existing parameters
• Display ‘New Widget’ dialog
• Enter name, data type, description fields
• Submit dialog using ‘Create’ button
• Hide dialog

Modify Existing Parameter of Widget

• Navigate to target widget using Open Existing Widget flow
• Click on ‘meta’ tab
• Display widget meta editor
• Click on ‘[pen icon]’ button, beside target parameter
• Display ‘Edit Parameter’ dialog
• Edit target fields (name, datatype, description)
• Submit dialog using ‘Create’ button
• Hide dialog

Remove Parameter of Widget

• Navigate to target widget using Open Existing Widget flow
• Click on ‘meta’ tab
• Display widget meta editor
• Click on ‘[xmark icon]’ button, beside target parameter

Change Name of Widget

• Navigate to target widget using Open Existing Widget flow
• Click on ‘meta’ tab
• Display widget meta editor
• Enter new name of widget in ‘Name’ field

Change Description of Widget

• Navigate to target widget using Open Existing Widget flow
• Click on ‘meta’ tab
• Display widget meta editor
• Enter new description of widget in ‘Description’ field

Change Content of Widget (javascript, html, css)

• Navigate to target widget using Open Existing Widget flow
• Click on content tab (‘HTML’, ‘CSS’, ‘JS’)
• Display content web ide editor
• Enter new content into editor

Save Widget

• Navigate to target widget using ‘Open Existing Widget’ flow
• Modify widget using other widget flows (Change Content of Widget, Change Description of Widget, Change Name of Widget, Add Parameter To Widget, Modify Existing Parameter, Remove Parameter of Widget, etc.)
• Click on ‘[Save Icon]’ button

Leave Widget Editor

• Navigate to target widget using ‘Open Existing Widget’ flow
• Click on ‘[xMark icon]’ button, left side of topbar

Terminologies

• Widget:

• a reusable block of UI that teachers and developers can use in their lessons.
• For example, a text block widget would contain the necessary logic to display rich text to the user.
• Widgets receive parameters as input that specify how they should act. For example, the text block mentioned before would take serialized rich text as one of its parameters.
• They can also interact with external APIs (such as our own) for more functionality.

• Module:

• a collection of widgets that handles displaying said widgets in some layout.
• For example, a standard document format where widgets are displayed from top to bottom, a slide show layout where each widget is represented as a single slide.

• Exercise:

• a collection of assets that can be copied, published, and configured to build and run code in a sandbox environment.
• For example, an exercise could contain a generator script that generates questions for widgets to display. (David has more details about this process)

Application Navigation Layout

Application uses ‘React Router v7’ in library mode to handle navigation throughout the app