janpaul123 / jsdares Goto Github PK
View Code? Open in Web Editor NEWLearn and explore JavaScript, and create your own dares!
Home Page: https://jsdares.com
License: MIT License
Learn and explore JavaScript, and create your own dares!
Home Page: https://jsdares.com
License: MIT License
Right now we only show a game on the home page, so we have to think about placing other content on the home page, such as the robot.
I have my keyboard repeat up fairly high. My son accidentally pasted perhaps a hundred copies of a few code lines in to the program area. It became nearly impossible to edit the code, and deleting single lines was taking seconds each. We managed to select all the pasted code and cut it in a single operation, but it took a while to get back to a nice state again.
Can the environment continue to be "happy" with a long program?
Should there be a limit on program length to prevent this?
Right now messages are placed under the text, which hides the text underneath. Perhaps position to the side if possible.
It would be very cool if much of the interface and code for the editor and outputs could be viewed and modified within jsdares. This is probably a big project, but very rewarding nonetheless. If we do this, we should probably think about integration with github or something.
Users must be able to ask community members questions about a dare. We might also add comments for those who've completed a dare.
I was enjoying JSdares with my son last night. I'm very impressed, thanks! I started reading your short essay about it today, and realised there's lots of amazing stuff we missed in the UI while using it for about an hour!
Could this be made more discoverable, or be explicitly explained? Or, how about: have a dare that introduces the concept! This is an approach often used in games to teach you the interface. Something like:
"Mouse over the robot's tracks to find the line of code that goes through the green square, then add a comment to it."
I think sound, even if subtle, could be pretty helpful with making the whole experience (even) more tangible.
*Sounds for the bot driving and turning would be good. Picking up a square. Hitting a wall.
Etc.
Not sure, but I think colours do not matter at the moment for canvas dares. Find a good colour matching metric and use it in canvas dares as an optional feature.
Right now dares are created using a stupid interface. It would be much better if you could just use programming to do this instead.
If you are on the Create page and click the Logout button, you are left on the Create page, but showing none of your dares, but the New button is still active.
It really is amazing. I hadn't realised the bat and ball thing really runs and you can see the time line or values and stuff…
But, it's … really confusing to look at, sorry. It's obviously extremely cleaver, and doing some really impressive heavy lifting, and recording a lot of stuff. But the visualisation isn't helping me to see what is happening much…
… I've come back to this and used it more. I'll leave my original comments in because that was how I initially felt. I'm learning more about it and I'm finding it more useful now. But I've got some suggestions for it.
… and I'm back again! I only now realised as well as as the "current tick
's timeline" at the bottom of the screen (which I was talking about in the notes below), there is also a slider for moving around through ticks. I didn't pick up on that until just now!
I much later realised that there is a slider for moving between ticks, as well as the time line for within ticks.
Could these two ways of moving through time (fine and coarse) to be integrated?
Although, in a way, they do have differences: it is almost like two variables as the current UI suggests. But could they be displayed more closely to make their relationship clear?
At the very least add properties like str.length, but potentially also others.
E.g. distribution plot of other scores, time to completion, etc. Make sure to make this optional, as for novice users this may be discouraging. We may also only enable it in settings or when the user has a certain amount of points.
For example:
config.outputs.canvas.enabled = true;
Now when looking at the "config" tab it still shows that the canvas is not enabled. Also when clicking on "true", turning it into "false", and then switching to the "Target program" and back, it shows "true" again.
Try adding 10000000000
and then dragging it.
This might be in there? It'd be nice to be able to option click a function invocation and go to the function, or something.
I'm not sure if there is a way to start again? With the first function example, we accidentally trashed the code and couldn't work out how to get it back. I think in the end I guessed what the function syntax would probably be and wrote it.
I'd suggest a prominent "Restart" button, and on first use, explain that you can "Undo" the "Restart" if you wish.
JSDares is the only JS I've used, so my terminology is probably wrong!
I like the code completion, but there's no completion for top level names as far as I can see. So, robot.
needs to be written in each case, and when you start to use functions functionName(
needs to be written.
When we finished a dare, we had to navigate the system to the menu of dares to pick the next.
I somewhat like this, because it can be fun to continue playing. However JSDares feels like a puzzle game, and puzzle games take you to the next level when you complete one. They let you get back to previous levels to earn more stars if you want to, but that's a secondary action.
It didn't seem to work on iPad (of iPhone). I'm not sure if its the same for other touch UIs?
The #1 thing people just starting out ask me is if it matters exactly where the ; and { and ( are placed.
In reality it doesn't. But in jsdares If I say
function foo()
{
stuff;
}
instead of
function foo() {
stuff;
}
it fails to run.
That is too strict in my opinion.
Also it doesn't seem to allow for loops inside of functions:
function automate (command) {
for( var i=0; i<command.length; i++) {
robot.drive( command[i] );
}
}
and doesn't seem to accept any kind of array syntax:
automate( [1,6] );
Is there a list of what is and isn't allowed?
And it would be nice if people could register with an existing account:
Google
Facebook
Twitter
BrowserID
OpenID
Other
I've used a few IDEs before, so I got the hang of the code completion pop up. My son didn't learn that he could use the cursors to select a completion until I showed him, and then he preferred it.
It now looks to bloody boring. 'Nuff said.
I'm looking at the bat and ball example. Variables / global state, unlike drawn canvas entities, are something that is not "visible":
*You can't see them (as a list).
… I don't remember B.V. addressing this, but it seems like it would make sense to stop them being hidden state?
I'd like to note this isn't something I noticed while my Son was using JSDares, so it's just me speculating.
Users must be able to share solutions with others, e.g. using Facebook and Twitter, or just by copying a URL. Those who view the dare must be able to immediately try out different things, or play the dare themselves.
Add a dare type in which the program should contain a function which is called multiple times with different parameters, and should give the right output in each case. Optionally, the right output can be hidden from the user, to make it more difficult.
Right now people may confuse the output in the preview window with the output of the program. We can solve this by showing "preview". Or perhaps it'd be better to restructure the way dares are shown.
It looks way too chaotic now.
How do you build and run this code? There's a Makefile, but 'make' complains:
$ make
make: *** No rule to make target `cli-assets-dev.js', needed by `browser.js'. Stop.
Once that's fixed, it's not obvious to me right away how to run this: point my browser at one of the HTML files, I presume, but there are a bunch of them, and the first I looked at, home/index.html, is not it. assets-dev/index.html looks more promising, but is mostly blank before the 'make' succeeds, at least.
Right now you have to use the "highlighting" and "manipulation" buttons, or use a keyboard command. But it would be much better if this would just work: when you hover a line it should just highlight it, and if you drag a number it should always use manipulation.
I think my son (and me, to be fair) sometimes had trouble with understanding (particularly with functions) because our bot was banging in to walls. This is effectively breaking / changing what the abstraction does, which is something else to keep a hold of when you're trying to grok abstraction.
Perhaps the early dares using functions could remove the walls and use an arena you're unlikely to drive out of. They could be more about adjusting the program to see how changing the abstraction changes all instances, or changing the code between calls just effects that code.
We can give an overview of typical student solutions by using the tree edit distance to group them.
In “Zoo”, this solution gets 0 points for being 10 lines, the maximum allowed:
var context = canvas.getContext("2d");
function animal(x, y) {
context.fillRect(x+150, y+50, 50, 50);
context.fillRect(x+50, y+100, 100, 50);
context.fillRect(x+50, y+150, 30, 50);
context.fillRect(x+120, y+150, 30, 50);
}
animal(0, 0);
animal(250, 0);
animal(0, 250);
animal(250, 250);
However, this solutions gets 200 points - an additional 100 for being 0 (?) lines, 10 for each line below 100:
var context = canvas.getContext("2d");
function animal(x, y) {
context.fillRect(x+150, y+50, 50, 50);
context.fillRect(x+50, y+100, 100, 50);
context.fillRect(x+50, y+150, 30, 50);
context.fillRect(x+120, y+150, 30, 50);
}
animal(0, 0); animal(250, 0); animal(0, 250); animal(250, 250);
Bring back some JavaScript syntax, but only per dare.
When zooming in or out using the browser, there are a couple of things that break:
We shouldn't store everything while running (fast mode), and recompute this information when needed for highlighting (slow mode). When manipulating, use the fast mode.
Right now there is no way to go back to an old program (or the initial program). We should add saving each submission, perhaps along with manual saving (but this may be redundant if you also save upon submission).
We had a small discoverability issue with this. If the "Submit" button was available during coding (in that tab), rather than in the dare tab, I think it would make more sense.
We award points, but you can't see a total yet, or a list of what you got points for.
Because now it is impossible to make dares with long run times, even though these may be slower on some machines.
For more consistent behaviour with the arrows, show the error message when hovering over the icon.
The statement currently selected for auto-completion should be highlighted green, for consistency.
I so often want this in IDEs.
The compiler knows that all these different uses of myDudeX
are the same thing. So if I change any of them to mySuperDudesX
, they could all update.
There's probably more to this than I expect, such as disconnecting a particular name to fix a bug or make a change, or what happens if you change a name to an existing name, or the empty string…
Twitter icon in dares is ugly..
Scratch did it for Scratch JR.
JSDares may not have the user base for that yet, but in a while, it could be a great way to get funding for development, assets, teacher's materials, evangelism, etc.
As a user, I've created an account but forgot my password. There's no way to reset my account password on the site. There's no link to click or form to use. The welcome email mentions resetting your password, but the site does not provide a way to do this. Please fix this, so I can log into my account.
Right now the game on the home page is rather complicated. We need a simple game that yet shows the power of the editor.
I was working on the dares last night with my son (8). He made good progress but struggled most with functions. I think the learning curve here is quite a bit steeper than earlier on. Could it be more gentle?
Perhaps add more dares that bring it up in stages? It seems like you get functions in, and then start asking darees to find an abstraction and also build a function to implement it.
I'd suggest:
robot.drive()
and robot.turnLeft()
. This might include just adding extra calls of the existing function.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.