Keyboard controls

[Riezebos]

This interactive course is amazing! I hope this is not redundant, I tried to find out whether there are ways to navigate the course screen using the keyboard, but I could not find a way to do this. Did I miss something?

If not, I would like to request a keyboard control feature. I believe that for most people coding is a keyboard-heavy activity. Having keyboard shortcuts for common operations can reduce arm movements and help get into more of a flow state. I believe it would be very helpful if at least the following actions would have a dedicated keyboard shortcut:

• Run script currently in editor
• Click Next/Previous button
• Focus on editor frame cursor
• Focus on Python shell cursor

[alexmojaki]

Thanks! This is a good idea. I've especially itched for a shortcut to run the code in the editor. I think Ctrl+Enter would be ideal for that.

Ctrl+Left/Right arrow could navigate to the next/previous page (taken when the editor is active), although I'm not sure whether the 'Next' shortcut should be enabled before the page is complete and the button is visible.

I don't know what would be good shortcuts for focusing on the editor/shell. Ctrl+F/S/E/H are all taken, at least in Chrome. So are Alt+F/E. A letter on its own wouldn't work if an input is already focused.

Tasks for anyone wanting to work on this (each can be its own PR):

• Ctrl+Enter to run code in the editor (Cmd on OSX)
• Don't switch focus to shell after Ctrl+Enter
• Let users know about the shortcut. Possible methods:
  • Explain it in the course text when the editor is introduced.
  • Show it in a popup when hovering over the Run button.
• Button in the menu which shows a simple readonly popup displaying keyboard shortcuts, and shortcuts for other actions: next/previous page, focusing the editor, maybe debuggers, full IDE mode, developer mode controls, settings.
• Section in Settings to configure shortcuts, replacing the readonly popup.

[Riezebos]

Thanks for the quick response! I've only done simple tasks with javascript so far, and haven't worked with React, so I'm not sure whether I could contribute to this.

Ctrl/Cmd+Enter sounds perfect.
Ctrl+Arrow is also used for navigating between words, maybe Ctrl+< and Ctrl+> are better options?
I would guess that the Next shortcut could also be disabled while the button is invisible.
Ctrl+? might be a good one for showing the shortcuts
Maybe Ctrl+; for focusing on the editor and then Ctrl+: for focusing on the shell?

[alexmojaki]

These are good points and ideas. I wonder if Ctrl+> might be better for the shell though, because of the >>>. Not a great argument though.

[Riezebos]

I was thinking about that too! It could also be something like Ctrl+[ for previous and Ctrl+] for next?

[Riezebos]

I thought I'd try something, there are a lot of packages and examples of how to create keyboard shortcuts in React, I used an example from 2021 that doesn't have any dependencies since I don't know which methods/packages have aged well: https://devtrium.com/posts/how-keyboard-shortcut

I copied the example useKeyPress function and added it to the frontendlib folder, then I tried to add the hello-world example from the bottom of the page in some places (index.js, AppComponent) :

const onKeyPress = (event) => {
  console.log(`key pressed: ${event.key}`);
};
useKeyPress(['a', 'b', 'c'], onKeyPress);

It seems that this is not allowed:

src/App.js
  Line 327:5:  React Hook "useKeyPress" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

src/index.js
  Line 13:1:  React Hook "useKeyPress" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

So I thought I can add it to a React function but as far as I understand there are no React functions defined in App.js or index.js, and I'm guessing this kind of hook should be enabled globally to work well.

I don't know if this is of any help, but at least I can report that the exact thing I tried is not working for now :)

[alexmojaki]

I think that these shortcuts should be active no matter what element is focused, and I think that means the best option is to add an event listener directly to document or document.body with plain JS methods, no React involved. But I'm not an expert on this stuff either.

[alexmojaki]

OK I've implemented the first basic bit in #231. It works nicely, there's just one UX thing I'm unsure about. In general, after the code finishes running, the shell gains focus. This makes it easy to experiment in the shell. It makes a bit more sense when you click the 'Run' button which previously was the only option. I'm thinking maybe that should be disabled in the keyboard shortcut case so that the cursor remains in the same place in the editor. Then if you see the output looks wrong you can easily change what you just wrote. What do you think? You can try the preview link in the PR.

[Riezebos]

Sorry for the late reply! I tried it out and I think it is a great solution! I would probably also switch to the editor in most cases but that can already be done after running with cmd+enter by pressing shift+tab.

I think there are 2 (hopefully) small things that would make it more clear to the user that this is possible:

1. Replace this sentence in the repo: Type the program below into the editor, then click the 'Run' button change to something like: Type the program below into the editor, then click the 'Run' button or press ctrl+enter or cmd+enter
2. When hovering over the Run button it would be nice if a tooltip is shown that shows the keyboard shortcuts for the button