An online learning platform for HTML, CSS and JavaScript in a playful way.
Visit http://play.code.design for the live application.
- JDK 11+
- Clojure
- Leiningen
- Docker
- Run
lein repl
- Run
(start)
inside of REPL
License: The Unlicense
An online learning platform for HTML, CSS and JavaScript in a playful way.
Visit http://play.code.design for the live application.
lein repl
(start)
inside of REPLWhen having no more missions, show a finish screen.
The text editor mode which is available for projects can be selected for story levels in the admin panel but doesn't show up for users in story levels
When changing the difficulty setting in story levels, the hidden HTML is not updated even when different hidden HTML settings are used per the admin panel
When the level is started and the tablet with the dialog is displayed, it is not possible to return to the overview from here. The dialog must be clicked through beforehand.
For users
JS Library:
http://sortablejs.github.io/Sortable/#shared-lists
Compare to DuoLingo word dragging in lections
After comparing the input with the solution, highlight the position of the first error (underline, red).
If there is too much text in the explanation screen in story levels, the "check" button is pushed down and out of the window.
The explanation area should either be scrollable with the button below or expandable with the button absolutely positioned and in front of other elements.
When validating CSS classes only one order (the one given in the admin panel) is allowed.
Yet when we have a class one may choose a different order:
body {
color: red;
background: white;
}
should be valid even if line 2 and 3 are swapped
Clicking on code blocks in story levels with code blocks could put them in the last place of selected code blocks. This would remove to navigate code blocks in complex story levels.
suggested by user during feedback round
As soon as "Tappy" is to be displayed as an image, the dialog on the tablet does not scroll to the corresponding position as it does with text.
In the admin panel, a button to delete templates is missing.
This would be good to remove unwanted templates or such that were created in error.
When formatting text as code in the admin panel in the explanation field, the text is not rendered as code blocks in the explanation screen in the story
When using the image syntax from the admin panel for story messages in the explanation field in the admin panel, the image is not displayed in the explanation screen in story levels
Depending on the set difficulty level, the e.g. complexity does not change. For example, the "Difficult" level is the easiest on "Level 1: Intro".
When selecting CSS as mission type for a story level, the page preview seems to inherit a standard CSS body rule with white background and sans-serif typefont regardless of what is written in the "hidden css" field in the admin panel.
Inheritance should either available to be selected additionally to custom css or be left out.
Users should be able to
Auto-save projects at certain intervals or throw warning before leaving the page in order to not lose progress on user projects
happened during workshop to one of the users
Dies ist ein Testissue, um das automatische Hinzufügen um Projekt zu prüfen.
For the HTML / CSS course we want to use local assets like icons and pictures instead of material which is maybe protected or not available in the future.
Currently you must click in the editor to start typing.
It would be better if you can start typing without using your mouse first.
Story missions shall be linear in the first step, but grouped to one story line (e.g. Story Line = "HTML Intro", 5 Missions as content)
In the projects view of users, there is no button to delete projects.
This would be quite handy to clean up the projects view or delete unwanted projects.
In the admin panel there is no button to delete missions.
This would be good in case of mistakenly adding a mission or wanting to remove elements from the story.
In CSS story levels, dragging and/or rearranging CSS blocks doesn't update the page preview
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.