codelifeorg / codelife Goto Github PK
View Code? Open in Web Editor NEWA learning tool and code editor designed for Brazilian students, free and open to all
Home Page: https://en.codelife.com/
License: GNU Affero General Public License v3.0
A learning tool and code editor designed for Brazilian students, free and open to all
Home Page: https://en.codelife.com/
License: GNU Affero General Public License v3.0
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.
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.
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.
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:
If we are using Gems/Coins, we need to define how users get them and spend them
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.
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:
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.
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:
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
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.
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
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.
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).
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.
Given a string of html and inline css code, we need a process by which we can save blob-image previews to a database.
Quiz answers currently use crappy alert window. Make a nice modal?.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.