Adding Code Completion for active codes

[bhoffman0]

It would be great to try out the code completion in the active code text areas (there should be an open source add-on in Code Mirror). This would really help students with learning disabilities and English as a second language learners in typing in their code. Thanks for anyone who wants to look into this!

[bhoffman0]

It looks like the Code Mirror addon for code completion is fairly basic and only works for JavaScript: https://codemirror.net/demo/complete.html. It might be possible to extend to other languages if it's just a list of keywords that it brings up. That might still be useful for students. The matchbrackets.js add-on would also be useful for students and easy to add: https://codemirror.net/doc/manual.html#addons

[bnmnetp]

Beryl,

There are a few other languages supported, html, css, javascript. I found a python version as well.

I think it would be a fun project for an advanced HS student or college student that wanted to see how Python or html is done and to write one for Java. Maybe one of your teachers has a student looking for a real world project. Or it could be an option for one of Jan's students this summer.

I have enabled one called anyword which simply looks at the words in the current editor and does autocompletion on those. Since lots of variables are reused many times in the code this is useful across all languages.

I have also enabled the matchbrackets.js that you mentioned. Will release this with the saturday updates.

[bnmnetp]

For reference if/when someone picks this up. My simple changes to activecode.js can be enhanced by changing the autocomplete function from always loading anyword to something like this:

CodeMirror.commands.autocomplete = function(cm) {
    var doc = cm.getDoc();
    var POS = doc.getCursor();
    var mode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(POS).state).mode.name;

    if (mode == 'xml') { //html depends on xml
        CodeMirror.showHint(cm, CodeMirror.hint.html);
    } else if (mode == 'javascript') {
        CodeMirror.showHint(cm, CodeMirror.hint.javascript);
    } else if (mode == 'css') {
        CodeMirror.showHint(cm, CodeMirror.hint.css);
    }
};

We will know the mode we want based on the parameters to the activecode directive.

[bhoffman0]

Thank you for pursuing this! I'm excited to try out the new features this weekend. I'll arrange someone to work on it this summer.

[dsanders12]

@bnmnetp @bhoffman0 I am interested in working on this project if no one has already been assigned.

[dsanders12]

@bnmnetp I have followed your above code implementation for autocomplete, but I am wondering how I can test this in http://localhost:8000/index.html. So far I have added the code in VSCode, and run npm run build inside of components, but I do not see any updates, so it is apparent that I am misunderstanding how to test these changes.

[bnmnetp]

@dsanders12 you need to rebuild a test page after running npm run build. -- you can use activecode/tests to try this out.