Better CodeHS

Enable autocomplete, set Vim mode, and apply Gruvbox theme the CodeHS editor + Keybindings for submit and check code.

  1. // ==UserScript==
  2. // @name Better CodeHS
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.1
  5. // @license MIT
  6. // @description Enable autocomplete, set Vim mode, and apply Gruvbox theme the CodeHS editor + Keybindings for submit and check code.
  7. // @author Qyoh
  8. // @icon https://static1.codehs.com/img/logo.png
  9. // @match https://codehs.com/*
  10. // @grant none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15. // Function to simulate a button click using the class or ID
  16. function clickButton(buttonSelector) {
  17. const button = document.querySelector(buttonSelector);
  18. if (button) {
  19. button.click();
  20. } else {
  21. console.error(`Button with selector "${buttonSelector}" not found.`);
  22. }
  23. }
  24.  
  25. function switchToTestCasesTab() {
  26. const testCasesTab = document.querySelector('.r.c'); // Replace with actual selector
  27. if (testCasesTab) {
  28. testCasesTab.click();
  29. } else {
  30. console.error('Test Cases tab not found.');
  31. }
  32. }
  33.  
  34. // Add event listener for keydown events
  35. document.addEventListener('keydown', (event) => {
  36. // Custom keybind for "Submit and Continue" (e.g., Ctrl + Enter)
  37. if (event.ctrlKey && event.key === 'Enter') {
  38. event.preventDefault();
  39. // Target the "Submit and Continue" button by class (adjust if necessary)
  40. clickButton('.StyledButtonKind-sc-1vhfpnt-0.fSozsy.sc-bkbkJK.eraKfR');
  41. console.log('"Submit and Continue" triggered.');
  42. }
  43.  
  44. // Custom keybind for "Check Code" (e.g., Alt + C)
  45. if (event.altKey && event.key === 'c') {
  46. event.preventDefault();
  47. // Target the "Check Code" button by ID and class
  48. switchToTestCasesTab();
  49. clickButton('#grading-unit-test-run.btn.btn-main.spinner');
  50. console.log('"Check Code" triggered.');
  51. }
  52. });
  53.  
  54. console.log('CodeHS keybinds loaded.');
  55.  
  56. // Wait for the Ace Editor to be available
  57. function waitForAceEditor() {
  58. const editorElement = document.getElementById("ace-editor"); // Change ID if necessary
  59. if (editorElement) {
  60. initializeAceEditor();
  61. } else {
  62. setTimeout(waitForAceEditor, 500); // Retry after 500ms
  63. }
  64. }
  65.  
  66. // Initialize Ace Editor with custom settings
  67. function initializeAceEditor() {
  68. const editor = ace.edit("ace-editor");
  69. ace.config.set("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/");
  70.  
  71. // Load language tools for autocomplete
  72. ace.config.loadModule("ace/ext/language_tools", function(languageTools) {
  73. editor.setOptions({
  74. enableBasicAutocompletion: true,
  75. enableLiveAutocompletion: true,
  76. enableSnippets: true
  77. });
  78. });
  79.  
  80. // Set Vim keyboard mode
  81. editor.setKeyboardHandler("ace/keyboard/vim");
  82.  
  83. // Set theme to Gruvbox
  84. editor.setTheme("ace/theme/gruvbox");
  85.  
  86. console.log("Vim mode, Gruvbox theme, and autocomplete enabled.");
  87. }
  88.  
  89. // Start the script
  90. waitForAceEditor();
  91. })();