elmsln / haxcms-user-flow

user flow

ELMSLN

ELMS Learning Network (ELMSLN) is an open source educational technology platform for building and sustaining innovation in course technologies. It accomplishes this by taking a Suite of Tools approach to learning design, allowing several systems to make up the different aspects of a course learning environment. Each course effectively forms a network of technologies (hence the name) which can then be better tailored to each individual course's needs.

Learn more about ELMSLN @ elmsln.org

Version	PHP	Includes	Status
1.0.4	7.2+	LitElement 2.x.x, Drupal 7.x, HAXcms 1.x.x

Contributing

You can learn more about contributing to ELMS:LN in our CONTRIBUTING.md guide. Vagrant is the fastest way to get up and running quickly. See the Vagrant installation documentation on how to get up and running now! elmsln.org also has some sponsored demos of the technology but the real deal is always best!

Ubuntu notice

Until update channels are updated to 2.2.4 please use this to get Vagrant working in Ubuntu 18+

wget -c https://releases.hashicorp.com/vagrant/2.2.4/vagrant_2.2.4_x86_64.deb
sudo dpkg -i vagrant_2.2.4_x86_64.deb

Issues

If you notice an issue or have a question please file it in our issue queue.

Documentation

See the Docs for questions and documentation either on our docs site or API site.

Vision and Governance

See https://github.com/elmsln/elmsln/blob/master/GOVERNANCE.md for our ELMS:LN Vision and Governance statement.

Code of Conduct

See https://github.com/elmsln/elmsln/blob/master/CONFLICT_RESOLUTION.md for our Conflict Resolution guide. See https://github.com/elmsln/elmsln/blob/master/CODE_OF_CONDUCT.md for our ELMS:LN code of conduct.

How can I get more involved?

There are many ways you can get involved in helping build ELMSLN; not all of which are technical in nature. The easiest way is to click the issues button in this repository. Submit feedback, help, questions, pedagogy, ideas, fan-art anything that helps us further our mission! All help and outreach is welcome and responded to.

Test, ask, jump in on the issue queues on github, drupal.org, twitter, email, phone, meet ups, drupalcamps, edtech events, our offices, coffee shops, or anywhere else that you can find pieces that will help build upon this work. We are here to make the future awesome together.

LICENSE

ELMSLN is a collection of many, many projects, all individually licensed, all open source. The myriad of License files is why this section is added to avoid confusion. If you have a licensing question or concern please raise it in the issue queue.

• The ELMS:LN top level repository is GPLv3, though most of the underlying code pulled in is not GPLv3. V3 enabled the greatest level of compatibility with our downstream repositories
• Drupal core and contributed modules / themes are GPLv2 due to licensing requirements of the drupal.org community.
• GravCMS is MIT licensed
• Polymer core is BSD 3 clause
• The majority of included Webcomponents (especially those from the LRNWebComponents repos) are Apache 2.0
• For other included libraries see their respective LICENSE.txt / LICENSE.md file included local to those projects and libraries.

haxcms-user-flow's Issues

Add status symbol into character

This might be a type of shirt or showing up to the right of the character or something, but a status icon to represent things like:

• caution / warning
• nice job / confirmation / success
• error / problem
• help / more info
• lightbulb

Jimmy's Tasks

• Search bar + talk to store
• Basic container for site bars (results of search)
• Make button to trigger new/return user (like the reset button)
• add route/step 0 (new people: does check to see if no site.json return: search bar and recents render)

App Store Data

Create an object in HAXCMSAppStore to capture the following information

"site": {
     "structure": "portfolio",
     "type": "Technology",
     "style": "Red"
}

Performance check for low quality device

Using the test that's available in the replace-tag (either same or a similar one) we should default asset states for a low quality device. Somethings we can do if we get that condition:

• sound off by default
• svg backgrounds off
• animations off
• ensure all calls have the priority lowered -- https://web.dev/priority-hints/
• font handled via https://web.dev/priority-hints/ / JS injection so we don't load it on poor devices

work on top bar of links, options, etc

This is its own web component, needs a slot for adding items to left, right and center of the bar. @elizabeth-delor did some mock ups in a few places, https://www.figma.com/file/P2a9LUfwRqCF3yX1DBieeK/Variants-and-Stuff?node-id=0%3A1 included.

needs to support sound toggle, dark mode toggle, the character face (which clicking reveals menu).

Other comps have the menu options / what can be done in that area so time to start working on implementing as its own component

Make circle version of rpg

Make an SVG that cuts out a nice circle version of the character

autogenerate site name

This way you can just click through if you really want to.

username-course-6w

8 bit button style

An asset for the "log out" button was recently exported but from looking at other comps aka this one:

It appears we probably need to make an 8bit button in a fashion similar to the logout button background that was exported. Not sure if we need additional assets in order to do the border in this manner or what. Also just learned this yesterday -- border supports a background image -- https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

If we used this maybe @dronk6 could implement your svg background assets for a button "border" in order to give other buttons this 8-bit vibe

enable portal-launcher support

chrome://flags/#enable-portals

while still not a graduated part of chromium, portal provides a really cool UX pattern for moving between SPAs. The portal-launcher tag that I made could be used so that the progressive enhancement is baked right into all links that take you to your new site

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/portal

portal-launcher used like this

<portal-launcher>
  <a href="https://btopro.com">btopro</a>
  <a href="https://haxtheweb.org">HAX the web</a>
</portal-launcher>

visual focus when tabbing to the darkmodetoggle

needs to be handled internally most likely. Also enter doesn't trigger click but spacebar does

resume / status message normalization

• hax might need to send the simple-toast stuff
• the character needs to be able to handle our "resume where you left off?" links. If it has a link / is this message, might not want to auto hide on click (so would need a way of disabling that in the settings that come across)
• ensure message doesn't start out with the "I can hear you" status message from the state change on sound status

Make a next.php for haxcms to attempt wiring up to find issues

Search-Bar

Implement a component with an input tag. As the user types, search the whole site.json's title field to filter out elements. All entities that pass, create site bars card to show them

past user vs new user dection and wire up to sites.json

Need to start hooking into calls to this data source in order to mess with it. This requires evaluation of the site.json data to determine if they should be shown the step...ed items or if they should be given the search options iniitally.

wire haxcms index up to the new app via global endpoints

#41 and #58 contingent but we're at about this point in our testing journey.

mocking up the portfolio site requirements

We don't really have a portfolio theme. We have a very poor, partly finished one that can be seen here -- https://btopro.com/

But what we really need is what is an art portfolio look like vs a business vs building it via the "create your own" option.

While I doubt we can get all the way through fully implemented, the 1st step would be to generate comps and white board out what the requirements of art portfolios are more generally. @Taylor-Bracone this is something I want you to focus on moving forward

• need a list of examples to base off of
• UI / wire framing / whiteboard mock ups of possible difference between bases portfolio theme and an 'art' or business portfolio
• Ideas for default content to be produced as part of these sites to help users realize what they can do with a portfolio
• questions that we know we need to ask of an audience / in a discussion group in order to get more insight into needs for the portfolio (who our audience is, what they need, what differentiates these from others, resume page?, etc)
• development of an archetype / core user that we're targeting with this to base our discussions, user stories, and ultimately app around

This would be something good to discuss with students at hax camp, so think of it as trying to develop an idea as much as possible in order to help drive a discussion around user needs gathering at hax camp.

Fix Bar animation and look

Property to remove expanding capability

If slot does not get passed in, a property should exist to disable to expansion of the card

after logging in, use JWT returned as a valid form of being logged in still

rpg finalization

In order to make things transparent around the character, we need to be able to colorize the hat by using an svg layer.

Can you export a 0-10 layer of the hat that will sit behind the default hat in order to provide a color please.

This way we can have things like the following:

This was a request from a student team in class but also is a need given the way it'll look in the app when presented as a message

jwt / login for the app

Also needs to support ability to hit a button to trigger a university login (like Login w/ your PSU account) which can come in via something like.

<app-hax>
  <div slot="login-providers"><a href="....azure/login">PSU login thing</a></div>
</app-hax>

pixelated help icon

I'm going to add a help icon / tour so that new users can get a quick run through of the UI by clicking it. We have this in other systems so really just need a button

darkmode on site listing

modal design needs implemented

we currently don't have a design for modals in the app

A modal has:

• background scrim / opacity layer
• border on window
• header / title of the pop up
• content area
• buttons for operations

Review keyboard logic for user menu

Seems buggy on activation at times when in context. May need a focus off event or something to autoclose

Implement property in router

We need to add a property in the router that is to be displayed in the tab text of the browser, and that will be shown in the scrollable-component HAXCMS-Title-Label

make vercel endpoints for operations

Just has to return similar data so we know it's the same feedback loop

remove menu options on app that don't have a purpose at app layer

items being wired up in haxcms, but things like "site info" or "start new journey" mean nothing when already presented w/ those options

Different hats as per cloogs original discussion

original team brainstorm called for hats to change based on state / thing going on in the app;

• construction hat for doing work / editing a page
• graduate cap / teacher hat if selecting building a course
• ? above head if confused or in a help menu
• other fun ones like bunny ears, cowboy, watermelon
• anything else you can come up with that'd be fun / different

normalize focus / hover / click state for buttons on the app

I did some a11y work to ensure you can only tab to what's active + resizing work to keep things focused correctly. Noticed the buttons are not normalized in hover / focus / active state. The 1st ones are but the new ones @liljimmyk99 started adding in need this standardization.

after build, screenshot service to render screen of the site as a thumb

Just like Vercel does, render a screenshot using another endpoint (the screenshot one). Heavily cache this

Select your party for who to add as contributors

A party selection screen where when you add someone's name, it adds them as a contributor but also renders their little RPG character to match. This can be an additional screen / modal that pops over when editing setting for a site from the main dashboard.

Flow

• site already created
• search on main UI
• click to expand options
• Hit "add collaborators"
• Show a UI much like a "party selection" screen in RPG games

Make legs to make character walk

I think you mentioned this but basically just legs in a slightly different position so alternating between it can look like movement

Fix mobile viewport for smallest mode

Need to scale the sides in and make sure it doesn't overflow.
Also toast needs to show up fixed to bottom of viewport as opposed to absolute

add @lrnwebcomponents/rpg-character into the project

We'll want to use this on the top bar when your logged in.

coming soon / construction tape sorta asset

Some features like "Make a training" or "Business portfolio" will not be ready for launch though they are planned for the future. It would be great if we still included them in the app / on the UI but have like a piece of masking tape / police tape / construction tape / something of that nature, which then says "coming soon" on it. This would drop over top of something and it would be disabled so that they couldn't click the button (or whatever).

Fix promise progress

login / log out buttons need to render based on valid state

sound on additional clickable things

sound on these events / actions

• change random-word
• search open
• search close
• expand results from an item
• click to go to new site
• click to go to existing site
• login opens
• login button click
• successfully logged in
• start new journey
• error sound if not logged in / failed login attempt

Custom save / Cancel buttons

Here's what save / cancel looks like in the context of the new top menu. Will be looking to comps as to how to fully implement them.

Review API endpoint name and structure changes

Minor, but now ALL data sends in a data nested property w. A status code, even our jwt which could have implications for haxcms and elms even if minor

Auto-Generate Cards from ./assets/site.json

Auto-generate a list of cards based on the site.json file

step to enter name

while wanting to just "make something" it's kinda expected you'll name your creation.

Storybook for Elements

Make HAXCMS-Portfolio-Button

Make a button to match comp.

course options

use TransparentCircle / svg designs for the progression steps

implement dropdown menu under profile from comp

menu has listing of options that are relevent to our blurring the lines between the hax app and haxcms options. This means some of these assets will need to either tie into that store or we just replicate the assets here and then when the time comes, actually move them over there to be leveraged as well.

Implement Drew's Background with HAX-App-Step

Wire in user menu to haxcms

After fixing #73 then this asset should be used in HAXcms top bar implementation.