codelifeorg / codelife Goto Github PK

User's will have a collection of pages in their studio associated to them, as such they will need a means of viewing them, creating new ones and deleting them.

• view list of files
• select file to open it
• click x to delete file
• change url on file-open to support permalinks
• make editor readonly if no file is open
• confirmation on change file (changes will be lost!)
• confirmation on delete file (are you sure?)
• enforce unique naming of files

Needs a slide type (shall always be second to last slide of final mini-island). This is then considered "unlocked" and should be accessible from the island's home.

• load cheat sheet from db into a variable on codeblock editor
• load cheat sheet from db into a variable in studio
• put cheatsheet into modal popover in editor
• put cheatsheet into modal popover in studio

More blueprintjs UI elements that need styles, you will see examples of all the ones we'll need on the site at /form.

We will need to incorporate the accounts from the old splash page. This could be written as a script or a one time DB dump.

Caveats here are that we will most likely need to update the current codelife user accounts table.

Create a DB element (probably in userprofiles) that holds latest lesson.

• Create db column
• Save to user when minilesson is visited
• Show "continue latest lesson" link somewhere

This should be a generic component which will end up being invoked in a bunch of different places, probably as mouseovers and via clicking. If invoked via clicking, we will need a document listening to remove the tooltip if the user clicks anywhere else on the page.

Profile page will need to be revamped. This includes:

• Profile Picture upload
• Form for writing bio
• Display of badges based on completion (dbtable: userprogress)
• "Resume" components
• Coin totals
• List of Codeblocks/Projects

If we are using Gems/Coins, we need to define how users get them and spend them

• Decide on rules for reward. 1 per slide? what about quizzes? right the first time vs second time?
• Add db columns to track gems/coins
• Increment coins once (and only once) for passing a lesson, requires db checking
• Show coins in profile/resume
• coin animation (optional)

Studio.jsx has some basic file exploration functionality. One can insert snippets using Snippets.jsx and open/close projects using Projects.jsx.

A CSS / visual first pass is needed to place DOM elements according to sketch/invision

Share.jsx currently requires login by default, remove this restriction so students can share their work publicly.

The should include a set of primary, secondary, tertiary and text colors to be used throughout the island page.

Related to #17

Preferably every studio project that a user creates and works on would have a URL like the following: /studio/user/unique-to-user-slug.

This is a blueprint UI element (see example in /ui). It would be nice to match the previous palette of the site and to embody the rounded corners, fun, light, kid friendly style from melissa's old mockups:

We'll need to have 2 different homepages, one where the user is logged out and one where they are logged in.

Another UI element which will end up being invoked in many different location and as such should be a generic component. The first use case will be for users to view snippets on the island page.

Probably need to update currentText on mount

Currently tools/ingest.py provides no schema and therefore fills the db with default BIGINT and TEXT types. Need to provide proper schema for each table to properly type inserts.

Right now we check for errors on every keystroke, consider a timeout or "VERIFY" button if this gets unwieldy

This could be something done at canon level or enforced by the codelife app. Although it is not necessary for DB integrity reasons (since the user will always have a unique id), it will be necessary for the codelife app since we will want to provide pretty public urls for every user. Eg /john_doe123/profile

User's need to know if they pass or not! The snippets cannot be saved until they are in a passing state thus blocking them from future islands.

This will require coordination from a set of "rules" in the db that should ALL be passing.

This will also require very clear instructions and error messages if submission is attempted and fails.

As per Cesar's suggestions, lets show a lock icon on the overworld islands that the user is blocked from. Also, lets always show the description text for these blocked islands so users can know what they'll be able to learn and incentivize to continue!

This will need to be done from datawheel-canon

Currently the "test passing" state relies on a series of rules. It would be nice to break these out into individual descriptions and live-update what is wrong with your code. For example:

✓ includes html tag
✓ includes body tag
✗ missing h1 tag

To accomplish this:

• Change rulejson to include prompts for positive and negative states
• Break out checking code to have individual passing/failing states
• Reduce checking frequency so it doesn't check on every keystroke

Hey dave, blueprint has a really ugle basic stylesheet so we'll need to create a basic override stylesheet of our own.

If you look at /ui you'll see a few examples.

There are 2 means of filtering other people's snippets for an island: by school and by municipality.

• insert drop down component
• have dropdown pull from db
• actually filter on click
• "show more" limiting

Shown below:

The purpose of this page is to have sample UI form control elements for dave to style.

We can use postgreSQL's baked in ARRAY type to store a list of hex values. See below:

Defining array column types

The way we tell PostgreSQL that a column type is an array is by simply appending [] at the end of the type, such as the following:

CREATE TABLE things (
  id SERIAL PRIMARY KEY,
  names VARCHAR(255)[],
  numbers INT[],
  descriptions TEXT[]
);

We spoke about having the tooltip of the next possible level open by default on the island page so the user knows exactly what their next step is.

Create an API route that can accept a lessonid and show all other snippets, or optionally, only the snippets in your school or municipality

• endpoint for all other snippets by lessonid
• filtering by school or municipality

From the island's home, a user should be able to view other people's snippets. They should be able to view other people's snippets at all times (to inspire them as they're completing the island) but only be able to see other people's code once they've completed their own.

• view other people's snippets
• show the user's name as part of the snippet (requires db join)
• add view source button
• restrict view source until they've beaten it (blocked by #28)
• "show more" limiting
• pop it out (blocked by #14)

There should be 3 states for visually indicating which is the next "mini-island" the user should continue to next: complete, available and unavailable. See below:

Once the user successfully passes their test, we need a congratulatory message and give a follow-up action. Something akin to:

• create hook that only fires after first completion
• find someplace to store win messages
• write copy (blocked)
• stylize popover (blocked)

Had a quick convo with alex, for this release, we will be doing less of a "warp straight to where I left off" and more of a "here is quite obviously your next lesson." This only requires us to ham up the click-me-itude of the Next Level or Next Island. We should probably give it a hoppy animation or some extra signaling.

This effectively replaces issue #32

Take all the text from the current codelife splash about page

The slidetypes contained in app/components/slidetypes are very basic, using float:left and float:right to separate sections. All these slidetypes will need CSS reworking

• TextImage
• ImageText
• TextText
• TextCode
• InputCode
• RenderCode
• Quiz
• CheatSheet

Using the i18n translation function, we need to wrap all UI text in t() and gather it for the translators.

Add new db columns to store social activity and decide when to increment them and show them.

• add db column for views (likes already exists in userprofiles)
• add element in DOM to pull and show this number
• add button to increment likes on Other People's snippets
• limit likes to one per user (yuck)
• add functionality to increment "forks" in studio (?)

Chloe and I noticed that the code editor and rendered page are too small on the slides right now, especially when there's more code

We were wondering if it would be better to scrape the title (or make it smaller) since it takes up space and doesn't always impart much information

From the island's home, a user should be able to view their own snippet (which is also the final slide of the last mini-island).

• Insert Link under island with function to fetch snippet contents
• Integrate modal box for pop-over display

Bring over all the content from the splash page's privacy policy page.

Right now the error checking that I get from ace editor is a little hard to understand, and exists in a popup (and is in English!)

Question for @alexandersimoes - I can get an array of Validation Errors from ace-editor, but where should these live? Would they even be helpful for Portuguese students? For example, will an error that mentions you've left out the DOCTYPE at the top of the file be more helpful or hurtful?

Need a layout for the islands page once the user has logged in.

For now (since all the islands aren't complete) we can reuse one example island. We will need to have 3 different classes though: complete, next and blocked.

Move the current Editor so that it exists as a popover after the final minilesson, with validation.

• apply blocking logic to castle
• fix submit/close buttons
• break out validation errors
• move "island completion" to after submitting passing code

Given a string of html and inline css code, we need a process by which we can save blob-image previews to a database.

• configure headless js library (dave)
• create function to pass htmlcode and return imgblob (dave)
• create db column to store preview images and update endpoints (jimmy)
• load screenshot in snippet listings (island view and possibly studio) (jimmy)

Quiz answers currently use crappy alert window. Make a nice modal?.

• make a nice modal, man

Add in about text from current splash page to the logged out version of the homepage.

In a given session, save passing state from blocking slides so that going back doesn't make you answer blocking questions again.

• decide on state variable format
• remove blocking if state allows it
• fix back/forward bug

Currently the codeblock level looks exactly like all the others. It would be cool to indicate its difference visually.

As a user completes an island and its mini-islands, this progress will need to be logged to the DB in some fashion and accrued as they continue for us to indicate visually.