alexmojaki

You can embed an integrated Jupyter notebook into a Grist spreadsheet: https://github.com/gristlabs/jupyterlite-widget/blob/main/US...

There is a link to the Table of Contents (https://futurecoder.io/course/#toc) in the bar at the top. Is it not easy to notice?

Thanks. I tried running code but couldn't see any results/output. I was hoping to see `input()` in action. The dev console just logs `{type: 'error', data: '{}', contentType: 'text/json'}`

This looks amazing, congratulations!

Thank you, it's really great to hear that you've gone through several pages already and didn't find any problems more significant than this :)

Awesome! Can you show me what you built?

> One interactive component that we use heavily that might interest you for futurecoder is what we call an interactive walkthrough: https://www.learncs.online/best#interactive-walkthroughs. It's like a video but preserving the interactive nature of a playground. Students really like them, and enjoy the opportunity to hear multiple explanations for the same concept when they're stuck. (We're working on popping this out for external use, and have a library in the works that you may be able to integrate with a bit of work.)

Awesome! I've only seen one other place doing something similar: https://scrimba.com/

This is definitely better than ordinary videos, and I like the point about multiple explanations. Although I do personally prefer that futurecoder rarely shows/tells without actually forcing users to run code and see for themselves, so they always have to be engaged. Even when they're told the exact code to run, they occasionally get asked to predict what the output will be, to make sure they're paying attention.

> I have no idea what your educational background is, but if you ever want a stable position that supports your educational innovation, consider applying for a teaching faculty job: https://go.cs.illinois.edu/teaching-faculty-hiring. (Currently our openings require a Masters degree.) We need more creators in computer science education.

It'd be great if I could be paid to work on futurecoder or something similar full time, and I've tried finding a way to make that happen before. But now I've just started a dream job at https://ought.org/ (working with AI, not education) and it'd be very hard to compete with that.

I don't have a Masters and I prefer to create things that are infinitely reusable rather than teaching directly. But thanks for the suggestion!

> Sorry if I was unclear but this was in no way a criticism of your excellent product. It is truly fantastic.

Thank you! I don't think you were unclear and I didn't read any criticism in your comment, I'm not sure why you thought I did. I was just sharing and adding to the conversation.

Thanks!

To run multiple lines of code, use the editor, not the shell. If you only see the shell, it's because it's hidden at the beginning of the course for beginners. See the table of contents (https://futurecoder.io/course/#toc) and skip to the page "Variables > Writing Programs" or after.

Or click the 'fullscreen' icon in the top right to enter 'IDE' mode in which everything is enabled, as the debuggers are similarly introduced gradually. Equivalently, go to https://futurecoder.io/course/#ide, or click "Just code" on the homepage.

The issue for tracking multi-line input in the shell is here: https://github.com/alexmojaki/futurecoder/issues/268

It's something I'd like to have, but it's not a high priority, and I don't think it needs to be.

I'll also add that it has been copied and rehosted, with my help. There's a slightly customised French version here: https://futurecoder.forge.aeif.fr/

This version is meant for maximum user privacy. firebase has been disabled completely so you can't sign up or login and nothing is stored online. There's also no google analytics.

The code is in https://forge.aeif.fr/futurecoder/futurecoder.forge.aeif.fr It's essentially just a mirror of the main repo with its own build process and configuration.

Thanks! I'm sure there's lots of good stuff out there but I'm afraid I have no plans to generalise to other programming languages myself. Many of the special magical features of futurecoder are things I specifically built in Python and wouldn't even know how to replicate in other languages.

futurecoder was actually translated to French by three teachers working for the French Ministry of Education to use when teaching the maths/programming subject 'NSI'.

I love maths myself but I've made a strong effort to avoid maths in examples/exercises so that the course is approachable to students who don't like maths. The first page is a special exception as it lets users immediately try something familiar (like 1+2) without needing to introduce strings or any other new concepts.

I very strongly believe that it's better to start with an easy language. Sure it's easier to learn Python after C++ than it is to learn C++ after Python, but a harder language will most likely frustrate and discourage beginners. I think it's a plausible risk that they might give up on programming and never want to try again.

Others have suggested autocomplete before. I opened https://github.com/alexmojaki/futurecoder/issues/120 in response as a place to talk about it. But in general my opinion is that it would probably actually be harmful to learning for beginners, and I'd need to see evidence to convince me otherwise.

Here's my favorite explanation why: https://cseducators.stackexchange.com/a/634

Here's another similar discussion: https://cseducators.stackexchange.com/questions/5777/python-...

Updates since then:

- A new 'assistant' UI that prevents users from getting stuck on instructions they found unclear, which was the most common complaint.

- Can now be translated to other languages.

- Available in 3 other languages.

- Can now be used in Safari.

- Can now be used offline.

- Can now be used in China.

- A new course chapter about dictionaries.

- A 'Stop' button to interrupt running code.

- Output is shown in the console as it's produced.

- time.sleep() works correctly.

- Ctrl+Enter keyboard shortcut to run code.

- Lots of small improvements and bug fixes.

It's available in Spanish: https://es-latam.futurecoder.io/

It was actually the first translation to be finished 100%, although now it's fallen behind to 91% as new English text was added. The reason it's not listed on the site alongside French and Tamil is that after it was finished, it was never proofread, so it never became officially ready :(

> I’d be up to the challenge of helping translate

Yes please!!!

Information about translating is here: https://github.com/alexmojaki/futurecoder/wiki/How-to-write-...

The task to finish and proofread the Spanish translation is recorded here: https://github.com/alexmojaki/futurecoder/issues/371

> simplifying the language and some of the conceptual stuff

This might work to an extent, but I think it makes more sense to choose a resource that's actually targeted at kids so that it's holistically and fundamentally designed to be the best thing possible for kids. That means features like simplifying the language itself (like Hedy or Scratch) or a game like https://codecombat.com/ to make it fun.

1. Thanks, I've never heard about this, will definitely need to check it out. Opened https://github.com/alexmojaki/futurecoder/issues/418

2. Because it all runs in the browser (thanks to Pyodide) it's just some static files, so it's extremely cheap to host. I can keep it going long after I'm bored with it. If I die or something and the site literally goes down, someone else can easily host it. There's already a slightly customised mirror of the French site hosted here: https://futurecoder.forge.aeif.fr/

Thanks! Great job teaching your daughter so well at such a young age!

> but there are more tools for Python these days

I can't comment on what exists or what's possible in Ruby, but futurecoder does indeed have a lot of specific magical features that I wouldn't know how to replicate in any other language.

The buttons on the landing page are:

- Start learning (see the tutorial content)

or

- Just code (you don't need to learn, you just want to use the editor/shell as a simple scratchpad/playground with some enhancements)

The links are working as intended, but maybe I need to make them clearer.

That's not really true. For the actual exercises where you need to solve a problem yourself, the system only tests that the code produces the correct output. It doesn't require you to use a specific approach, so there are infinite possibilities, although it may forbid certain approaches that go against what the current section is trying to teach.

There are many steps that do require entering exact code, but that's because in those cases the code itself is the whole point, not just the output. In most cases they're in places where new concepts are being introduced, so jumping to exercises wouldn't make sense. Often you're even being asked to enter code that does something 'wrong' so you can see common mistakes in action.

Steps that require exact code are always explicitly labeled as such under the 'Requirements'. In most cases the code that needs to entered is given exactly in the text in one piece. When it isn't, the Requirements will always contain extra clarification for the instructions. And if that isn't enough, it's still always possible to look at the solution, although for that kind of step it shouldn't typically be needed.

Your comment sounds very similar to the most common kind of feedback I used to get from users who found the instructions unclear and got stuck. I recently made a major update to the user interface to solve this problem, including the stuff in the paragraph above. If you've used futurecoder before it's possible you haven't experienced this yourself. If you can't see it right now, you may have old content cached, hard refresh the page in your browser. Also, the new features haven't been translated yet so they're only available on the English site.

> Is there any way for users to construct their own multiple stage tutorials?

I really hope some kind of GUI to do that can exist one day, but it's definitely a complicated feature that I'd need help from contributors to build. Same for graphical output.

> (It looks like we can do single questions)

I think you're talking about the question wizard. That's for helping people to write good quality questions about their own struggles to post on StackOverflow and similar sites. It's not for making 'challenges' for others to solve.

> Incredibly generous of you to make it open source!

Thank you! I'm really trying to improve the state of education and make the world a better place. I hope that in addition to directly helping users, I can inspire other educators, raise the bar, and help them build similar products. To this end, futurecoder is powered by many open source libraries that I've created which are designed to also be useful in their own right:

Debuggers: these are integrated in the site but also usable in any environment:

- https://github.com/alexmojaki/birdseye

- https://github.com/alexmojaki/snoop

- https://github.com/alexmojaki/cheap_repr (not a debugger, but used by the above two as well as directly by futurecoder)

Tracebacks:

- https://github.com/alexmojaki/stack_data (this is also what powers the new IPython tracebacks)

- https://github.com/alexmojaki/executing (allows highlighting the exact spot where the error occurred, but also enables loads of other magical applications)

- https://github.com/alexmojaki/pure_eval

You can see a nicer presentation (with pictures) of the above as well as other projects of mine on my profile https://github.com/alexmojaki

Libraries which I specifically extracted from futurecoder to help build another similar educational site https://papyros.dodona.be/?locale=en (which does have a canvas output, at least for matplotlib):

- https://github.com/alexmojaki/sync-message (allows synchronous communication with web workers to make input() work properly)

- https://github.com/alexmojaki/comsync

- https://github.com/alexmojaki/pyodide-worker-runner

- https://github.com/alexmojaki/python_runner

Creator here. Thank you! I could definitely still use help if you're willing, here's some specific issues:

https://github.com/alexmojaki/futurecoder/issues/212 https://github.com/alexmojaki/futurecoder/issues/226 https://github.com/alexmojaki/futurecoder/issues/253 https://github.com/alexmojaki/futurecoder/issues/259

I just gave this a quick try. I entered "1,2" in the first cell and "3" in the second cell, no quotes. Then I saved, and the raw output looks like this:

    1,2,3,,,,,,,,
    ,,,,,,,,,
    ,,,,,,,,,
    ... (100 lines total)

Most importantly, the comma in "1,2" was not escaped or quoted, so opening the same CSV that I saved produces a different result.

But also, all the extra commas is pretty weird, at least by default. And I don't see any configuration for that anyway.

I'm afraid not, several of its features are specific to Python.

Sorry to hear that. Which part of loading are you talking about? The home page? The course? Being able to run code?

There's no plans for other programming languages, a lot of the features are Python-specific.

Packages supported by Pyodide (anything that can be installed with micropip) are installed automatically when imported. So if you just import pandas, sklearn, or matplotlib, it'll just work, although it'll take a while the first time. Unfortunately seaborn doesn't seem to work. But in any case, there's no graphical output section for plots and such.

I would like to eventually have multiple courses available, whether that's for covering different topics/tracks (like data science), different styles of teaching, different levels, or different languages. But the current course still isn't 'finished' so having alternatives hasn't been a priority. If you're interested in contributing course material, the basic topics that I want to cover next are listed in https://github.com/alexmojaki/futurecoder/issues/165 . If you'd be more motivated to write a course about pandas or a French translation then I'd be keen to implement the necessary architecture to make that possible for you.

At every step, you need to run code to advance. On that page (https://futurecoder.io/course/#AddingStrings) you first need to run `'hello' + 'world'` in the shell as instructed. The next step is an exercise: you have to output the same thing with a space in between words, so code such as `'hello' + ' ' + 'world'` is accepted. The 'Next' button only appears at the end of the page.

You're not the first person I've seen get confused about this, I'll need to find a way to make it clearer that the interface is waiting for you to run something.

Thanks for pointing this out, will investigate.

Glad you like it! Yes, the basics of f-strings are covered in https://futurecoder.io/course/#IntroducingFstrings