Add julia, python, sql Ace language modes

NEWS.md

@@ -48,6 +48,8 @@
 
 -   Improved support for SQL exercises makes it possible to check student submissions for SQL exercises (#668).
 
+-   Exercise editors now use syntax highlighting and basic autocompletion for exercises in languages other than R with syntax highlighting support for JavaScript, Julia, Python and SQL (#693).
+
 ## Interactive Exercises and Questions
 
 ### Exercises

learnr-js/tutorial/tutorial.js

@@ -839,7 +839,14 @@ Tutorial.prototype.$showExerciseProgress = function (label, button, show) {
 Tutorial.prototype.kMinLines = 3
 
 // edit code within an ace editor
-Tutorial.prototype.$attachAceEditor = function (target, code) {
+Tutorial.prototype.$attachAceEditor = function (target, code, options) {
+  const engineModes = {
+    js: 'javascript'
+  }
+  const optsDefaults = { engine: 'r' }
+  options = Object.assign({}, optsDefaults, options)
+  options.engine = engineModes[options.engine] || options.engine
+
   const editor = ace.edit(target)
   editor.setHighlightActiveLine(false)
   editor.setShowPrintMargin(false)
@@ -848,9 +855,12 @@ Tutorial.prototype.$attachAceEditor = function (target, code) {
   editor.renderer.setDisplayIndentGuides(false)
   editor.setTheme('ace/theme/textmate')
   editor.$blockScrolling = Infinity
-  editor.session.setMode('ace/mode/r')
+  editor.session.setMode(`ace/mode/${options.engine}`)
   editor.session.getSelection().clearSelection()
   editor.setValue(code, -1)
+  editor.setOptions({
+    enableBasicAutocompletion: true
+  })
   return editor
 }
 
@@ -1006,7 +1016,7 @@ Tutorial.prototype.$initializeExerciseEditors = function () {
     outputFrame.append(outputDiv)
 
     // activate the ace editor
-    const editor = thiz.$attachAceEditor(codeDivId, code)
+    const editor = thiz.$attachAceEditor(codeDivId, code, optsChunk)
 
     // get setup_code (if any)
     const setupCode = null
@@ -1319,7 +1329,7 @@ Tutorial.prototype.$addSolution = function (exercise, panelHeading, editor) {
           // adjust editor and container height
           const solutionEditor = thiz.$attachAceEditor(
             content.get(0),
-            solutionText
+            solutionText // FIXME get exercise engine
           )
           solutionEditor.setReadOnly(true)
           solutionEditor.setOption('minLines', Math.min(editorLines, 10))

tests/manual/ace-mode/ace-mode.Rmd

@@ -0,0 +1,69 @@
+---
+title: "Ace Language Mode"
+output: learnr::tutorial
+runtime: shiny_prerendered
+---
+
+```{r setup, include=FALSE}
+library(learnr)
+```
+
+## Test Cases
+
+These exercises don't have checks.
+
+### R
+
+An exercise using R.
+
+```{r ex1, exercise = TRUE}
+stem(log(rivers))
+```
+
+```{r ex1-hint}
+stem(rivers)
+```
+
+### Python
+
+```{python ex-python, exercise = TRUE}
+[x for x in [3, 4, 5, 6, 7] if x > 5]
+```
+
+```{python ex-python-hint}
+[x for x in [3, 4, 5, 6, 7] if x > 2]
+```
+
+### JavaScript
+
+*Note: syntax highlighting works but no output will be shown unless you run the code in an IIFE and use `console.log()` or `window.alert()`.*
+
+```{js ex-js, exercise = TRUE, results = "asis"}
+(function() {
+  const value = Math.min.apply(Math, [42, 6, 27])
+  window.alert(`The value is ${value}`)
+})()
+```
+
+```{js ex-js-hint}
+console.log(Math.min(42, 6, 27))
+```
+
+### Julia
+
+```{julia ex-julia, exercise = TRUE}
+# While loops loop while a condition is true
+let x = 0
+    while x < 4
+        println(x)
+        x += 1  # Shorthand for in place increment: x = x + 1
+    end
+end
+```
+
+```{julia ex-julia-hint}
+for pair in Dict("dog" => "mammal", "cat" => "mammal", "mouse" => "mammal")
+    from, to = pair
+    println("$from is a $to")
+end
+```

tools/update-ace.R

@@ -12,10 +12,13 @@ ACE_FILES <- c(
   "mode-css.js",
   "mode-html.js",
   "mode-javascript.js",
+  "mode-julia.js",
   "mode-plain_text.js",
+  "mode-python.js",
   "mode-r.js",
   "mode-rdoc.js",
   "mode-rhtml.js",
+  "mode-sql.js",
   "mode-text.js",
   "mode-xml.js"
 )