6 ms·

Show HN: C++ Editor for Teaching How to Code

95 points by goalexboxer 8y ago

goalexboxer 8y ago
Hello, I was thinking at a solution to teach code easier for the beginners. C++ is the only available language for computer science classes in my country. The project is aimed to teach coding for students as the next step after Scratch. The language implementation is just a subset of C++, it relies on JSCPP interpreter. I am looking for feedback and suggestions. Thanks!
- pletnes 8y ago
  What about jupyter and root instead? https://root.cern.ch/notebooks/HowTos/HowTo_ROOT-Notebooks.html https://root.cern.ch/notebooks/HowTos/HowTo_ROOT-Notebooks.h... AFAIK it uses clang for parsing, which is as good a C++ parser as any.
  - goalexboxer 8y ago
    This Jupyter integration seems really cool. Since I'm targeting educational environments it would open even more options for automated evaluation. Thanks!
    - pankajkumar229 8y ago
      We have an education product and we support C++ using jupyter/nbgrader/clang too. https://datacabinet.info/dc-docs/sbs/projects.html#step-3-c https://datacabinet.info/dc-docs/sbs/projects.html#step-3-c . We had to make some clang changes to make it work.
- davidcollantes 8y ago
  It is completely broken (interface) on mobile.
  - goalexboxer 8y ago
    At this point, sadly yes. I'm just experimenting to see if the live visualization is useful.
- hultner 8y ago
  I’m curious as to which country it is that only teaches C++ for all programming? And why that is, sounds very particular. I started programming in C and C++. Back then it was the knly languages I could find books for in the library and I had managed to get my hands on a Borland compiler via an older cousin, but I wouldn’t have picked it as a newcomer language today.
  - goalexboxer 8y ago
    In Romania. There are computer science classes starting 11 years old students in every school but Pascal and C/C++ are the only options.
SamReidHughes 8y ago
It fails to compile the program #include <iostream> int main() { int x = 23; std::cout << x; return 0; } It seems like it can't handle namespaces. When I write #include <vector> it complains, "cannot find library: vector". I think this isn't going to be very useful for people unless you get a C++ evaluator that works correctly. There is a demo of Clang running in the browser using webassembly here: >> https://tbfleming.github.io/cib/ https://tbfleming.github.io/cib/ << but it doesn't actually work for me on Firefox. Maybe I need to use Chrome. That is probably a better option for getting C++ running in the browser.
- goalexboxer 8y ago
  The repo of the original interpreter: https://github.com/felixhao28/JSCPP https://github.com/felixhao28/JSCPP Which notable features are not implemented yet? Goto statements Object-oriented features Namespaces Multiple files support The target audience would consists in students trying simple algorithms. By the end of the high school, students are only using very basic C-syntax: variables, arrays, functions, and a couple of functions from the standard library. Some partial implementations: iostream (only cin and cout and endl) cmath cctype cstring cstdio (partial) cstdlib (partial) Other includes could be added too. What I am trying to highlight is if there is any possibility to increase the visual feedback for students heading first to programming. Something more like an interpretor would be more suitable in this case, but the wasm compilation doesn't seem too slow though. Thanks for this demo!
  - SamReidHughes 8y ago
    As far as I can tell, this interpreter doesn't even have std::string, and you can't define your own datatypes or allocate. The interpreter also doesn't handle pointers into arrays properly. I'm not familiar with other countries' curricula, but we had vectors and strings very early on when I learned C++. I like the general idea of the debugging interface, that could help a lot of people. But I think you should upgrade the interpreter. I don't know if that's possible while retaining the debugging interface, unfortunately.
ryanianian 8y ago
Kinda neat but it looks extremely limited in ways that I think would frustrate a beginner: E.g. the following doesn't do anything #include <iostream> using namespace std; int get7() { return 7; } int main() { return get7(); } but if you manually inline the get7() it displays 7, so returning the value from another function doesn't work which seems quite odd and I think would preclude playing with recursion. (You can assign the get7() return value to a local var and return that and it works so there is a workaround but it's awkward.) Similarly, if there are compiler errors it gives no indication as to what the error might be. C++ compiler errors are always pretty terrible but not showing anything about where even a parse went wrong could really get in the way of fixing typos etc that can really get in the way of learning the concepts.
- goalexboxer 8y ago
  In this case there are no variables updated so the editor is not very useful indeed. The parsing erros for this interpreter are very limited, however there is internal access to the location of the failure (line, column) so there could be added a red underline to suggest the errors. Thanks for the feedback!
antoineMoPa 8y ago
That's beautiful!
svat 8y ago
Good work, pleasing UI (when it works). Please also compare with the excellent pythontutor.com website (it works with C++ too: http://pythontutor.com/cpp.html http://pythontutor.com/cpp.html ). Examples of differences I can see: * pythontutor requires a backend and does not run entirely in the browser. * pythontutor supports much more of C++ (i.e., has fewer limitations) * shows pointers, heap and stack better. But there are probably many more differences; would like to see a comparison among similar resources. Anyway, I think this sort of live visualization is indeed very useful; great work and please continue.
- goalexboxer 8y ago
  Python Tututor is the first project in this category that I totally loved it. The dream would be to have all the options Python Tutor has and also speed and user experience, but technically there is not very easy to achieve. Thanks for the feedback!
turrini 8y ago
If you create a variable as int and later change it to unsigned long long, it doesn't work anymore.
- goalexboxer 8y ago
  Yes, indeed. The live panel displays only basic types (long, char, int, floats and basic arrays). Thanks for noticing!
  - turrini 8y ago
    Great idea and implementation, btw!
aboutruby 8y ago
Great idea. For some reason it kept removing my semicolon after I used the time-traveling.
- goalexboxer 8y ago
  I haven't noticed that, could you please describe more your context, including the browser version and OS? Thank you!
zyngaro 8y ago
Very Nice ! But it should be stated that this is not C++ but just C++ syntax.
zach43 8y ago
This is the definitely the best implementation of a C++ code visualization i've seen yet, kudos to the developers for this That said, its a bit sad that this is in C++, which I think is an atrocious language for coding beginners to learn. Sure, a lot of people here might have learned C++ to start with (me included), but there are much, much better alternatives available today (pretty much any modern interpreted language for example). I've noticed that people who are new to coding get the biggest boost to learn more about programming if they are in an environment where they can cause some kind of interesting visual output. In this regard, many languages that have good visual tooling integration (like Javascript's integration with HTML, python integrating with a GUI toolkit like pygame) really kicks it out of the park when it comes to motivating newcomers. If the devs are reading this, could I suggest adding a 2D graphical component to this tool? unfortunately I can't think of any good, easy-to-use graphics APIs in C++ (a la the canvas API in JavaScript), but SFML and CairoMM come to mind.
lasagnaphil 8y ago
This code, which is clearly undefined behavior (because of dangling pointer), outputs the number 2, which is very worrisome. #include <iostream> using namespace std; int* foo() { int y = 2; return &y; } int main() { int* x = foo(); cout << *x << endl; return 0; } I would recommend not using this for educational purposes yet; it could mislead students about pointer usage.
- goalexboxer 8y ago
  Fair point, I will definetly try to use a different compiler next time. Thanks for pointing this out!

95 points by goalexboxer 8y ago

Hello, I was thinking at a solution to teach code easier for the beginners. C++ is the only available language for computer science classes in my country. The project is aimed to teach coding for students as the next step after Scratch. The language implementation is just a subset of C++, it relies on JSCPP interpreter. I am looking for feedback and suggestions. Thanks!

pletnes 8y ago
What about jupyter and root instead? https://root.cern.ch/notebooks/HowTos/HowTo_ROOT-Notebooks.html https://root.cern.ch/notebooks/HowTos/HowTo_ROOT-Notebooks.h... AFAIK it uses clang for parsing, which is as good a C++ parser as any.
- goalexboxer 8y ago
  This Jupyter integration seems really cool. Since I'm targeting educational environments it would open even more options for automated evaluation. Thanks!
  - pankajkumar229 8y ago
    We have an education product and we support C++ using jupyter/nbgrader/clang too. https://datacabinet.info/dc-docs/sbs/projects.html#step-3-c https://datacabinet.info/dc-docs/sbs/projects.html#step-3-c . We had to make some clang changes to make it work.
davidcollantes 8y ago
It is completely broken (interface) on mobile.
- goalexboxer 8y ago
  At this point, sadly yes. I'm just experimenting to see if the live visualization is useful.
hultner 8y ago
I’m curious as to which country it is that only teaches C++ for all programming? And why that is, sounds very particular. I started programming in C and C++. Back then it was the knly languages I could find books for in the library and I had managed to get my hands on a Borland compiler via an older cousin, but I wouldn’t have picked it as a newcomer language today.
- goalexboxer 8y ago
  In Romania. There are computer science classes starting 11 years old students in every school but Pascal and C/C++ are the only options.

SamReidHughes 8y ago

It fails to compile the program #include <iostream> int main() { int x = 23; std::cout << x; return 0; } It seems like it can't handle namespaces. When I write #include <vector> it complains, "cannot find library: vector". I think this isn't going to be very useful for people unless you get a C++ evaluator that works correctly. There is a demo of Clang running in the browser using webassembly here: >> https://tbfleming.github.io/cib/ https://tbfleming.github.io/cib/ << but it doesn't actually work for me on Firefox. Maybe I need to use Chrome. That is probably a better option for getting C++ running in the browser.

goalexboxer 8y ago
The repo of the original interpreter: https://github.com/felixhao28/JSCPP https://github.com/felixhao28/JSCPP Which notable features are not implemented yet? Goto statements Object-oriented features Namespaces Multiple files support The target audience would consists in students trying simple algorithms. By the end of the high school, students are only using very basic C-syntax: variables, arrays, functions, and a couple of functions from the standard library. Some partial implementations: iostream (only cin and cout and endl) cmath cctype cstring cstdio (partial) cstdlib (partial) Other includes could be added too. What I am trying to highlight is if there is any possibility to increase the visual feedback for students heading first to programming. Something more like an interpretor would be more suitable in this case, but the wasm compilation doesn't seem too slow though. Thanks for this demo!
- SamReidHughes 8y ago
  As far as I can tell, this interpreter doesn't even have std::string, and you can't define your own datatypes or allocate. The interpreter also doesn't handle pointers into arrays properly. I'm not familiar with other countries' curricula, but we had vectors and strings very early on when I learned C++. I like the general idea of the debugging interface, that could help a lot of people. But I think you should upgrade the interpreter. I don't know if that's possible while retaining the debugging interface, unfortunately.

ryanianian 8y ago

Kinda neat but it looks extremely limited in ways that I think would frustrate a beginner: E.g. the following doesn't do anything #include <iostream> using namespace std; int get7() { return 7; } int main() { return get7(); } but if you manually inline the get7() it displays 7, so returning the value from another function doesn't work which seems quite odd and I think would preclude playing with recursion. (You can assign the get7() return value to a local var and return that and it works so there is a workaround but it's awkward.) Similarly, if there are compiler errors it gives no indication as to what the error might be. C++ compiler errors are always pretty terrible but not showing anything about where even a parse went wrong could really get in the way of fixing typos etc that can really get in the way of learning the concepts.

goalexboxer 8y ago
In this case there are no variables updated so the editor is not very useful indeed. The parsing erros for this interpreter are very limited, however there is internal access to the location of the failure (line, column) so there could be added a red underline to suggest the errors. Thanks for the feedback!

antoineMoPa 8y ago

That's beautiful!

svat 8y ago

Good work, pleasing UI (when it works). Please also compare with the excellent pythontutor.com website (it works with C++ too: http://pythontutor.com/cpp.html http://pythontutor.com/cpp.html ). Examples of differences I can see: * pythontutor requires a backend and does not run entirely in the browser. * pythontutor supports much more of C++ (i.e., has fewer limitations) * shows pointers, heap and stack better. But there are probably many more differences; would like to see a comparison among similar resources. Anyway, I think this sort of live visualization is indeed very useful; great work and please continue.

goalexboxer 8y ago
Python Tututor is the first project in this category that I totally loved it. The dream would be to have all the options Python Tutor has and also speed and user experience, but technically there is not very easy to achieve. Thanks for the feedback!

turrini 8y ago

If you create a variable as int and later change it to unsigned long long, it doesn't work anymore.

goalexboxer 8y ago
Yes, indeed. The live panel displays only basic types (long, char, int, floats and basic arrays). Thanks for noticing!
- turrini 8y ago
  Great idea and implementation, btw!

aboutruby 8y ago

Great idea. For some reason it kept removing my semicolon after I used the time-traveling.

goalexboxer 8y ago
I haven't noticed that, could you please describe more your context, including the browser version and OS? Thank you!

zyngaro 8y ago

Very Nice ! But it should be stated that this is not C++ but just C++ syntax.

zach43 8y ago

This is the definitely the best implementation of a C++ code visualization i've seen yet, kudos to the developers for this That said, its a bit sad that this is in C++, which I think is an atrocious language for coding beginners to learn. Sure, a lot of people here might have learned C++ to start with (me included), but there are much, much better alternatives available today (pretty much any modern interpreted language for example). I've noticed that people who are new to coding get the biggest boost to learn more about programming if they are in an environment where they can cause some kind of interesting visual output. In this regard, many languages that have good visual tooling integration (like Javascript's integration with HTML, python integrating with a GUI toolkit like pygame) really kicks it out of the park when it comes to motivating newcomers. If the devs are reading this, could I suggest adding a 2D graphical component to this tool? unfortunately I can't think of any good, easy-to-use graphics APIs in C++ (a la the canvas API in JavaScript), but SFML and CairoMM come to mind.

lasagnaphil 8y ago

This code, which is clearly undefined behavior (because of dangling pointer), outputs the number 2, which is very worrisome. #include <iostream> using namespace std; int* foo() { int y = 2; return &y; } int main() { int* x = foo(); cout << *x << endl; return 0; } I would recommend not using this for educational purposes yet; it could mislead students about pointer usage.

goalexboxer 8y ago
Fair point, I will definetly try to use a different compiler next time. Thanks for pointing this out!