Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Code Completion for active codes #44

Open
bhoffman0 opened this issue Feb 3, 2022 · 9 comments · May be fixed by #441
Open

Adding Code Completion for active codes #44

bhoffman0 opened this issue Feb 3, 2022 · 9 comments · May be fixed by #441
Assignees
Labels
good first issue Good for newcomers help wanted Extra attention is needed

Comments

@bhoffman0
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Member

bnmnetp commented Mar 8, 2022

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 bnmnetp added help wanted Extra attention is needed good first issue Good for newcomers labels Mar 8, 2022
@bnmnetp
Copy link
Member

bnmnetp commented Mar 9, 2022

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
Copy link
Contributor Author

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
Copy link

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

@dsanders12
Copy link

@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
Copy link
Member

bnmnetp commented Jul 14, 2022

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

@bnmnetp bnmnetp transferred this issue from RunestoneInteractive/RunestoneComponents Jun 7, 2023
@daizenj
Copy link
Contributor

daizenj commented Nov 16, 2023

I do not see any PR linked to this. I am picking this fun project up! 😊

@thaopham03
Copy link

I catch up with Daize and will work on this idea with her too!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants