redesign: move command palette to the left (#315)

This has the following advantages:

* more vertical space becomes available, so the commands that are still
  valid from previous levels can be displayed as well.
* it frees up vertical space in the main content area, so that can be
  filled with more instructional content.

coursedata/level-defaults/en.yaml

@@ -4,17 +4,14 @@
     start_code: "print hello world!"
     commands:
       -
-        name: "print"
         explanation: "Print something with `print`."
         example: "Example: print Hello welcome to Hedy!"
         demo_code: "print Hello welcome to Hedy!"
       -
-        name: "ask"
         explanation: "Ask something with `ask`."
         example: "Example: ask What is your favorite color?"
         demo_code: "ask What is your favorite color?"
       -
-        name: "echo"
         explanation: "Repeat something using `echo`."
         example: "Example: echo so your favorite color is..."
         demo_code: "ask What is your favorite color?\necho so your favorite color is..."
@@ -23,17 +20,14 @@
     start_code: "print hello world!"
     commands:
       -
-        name: "is"
         explanation: "Give a word a name to use in the program using `is`"
         example: "Example: name is Hedy."
         demo_code: "name is Hedy\nprint welcome name"
       -
-        name: "ask"
         explanation: "Ask something with `ask`. Beware! You need to give the answer a name with `is`."
         example: "Example: color is ask What is your favorite color?"
         demo_code: "color is ask What is your favorite color?\nprint color is your favorite!"
       -
-        name: "choose_random"
         explanation: "Choose a random word from a group with `at` and `random`"
         example: "Example: animals is dog, cat, kangaroo."
         demo_code: "animals is dog, cat, kangaroo\nprint animals at random"
@@ -42,17 +36,14 @@
     intro_text: "`ask` is still the same in level 3, but` print` is different now. You must enclose text that you want to print in quotation marks."
     commands:
       -
-        name: "print"
         explanation: "Print exactly using quotation marks"
         example: "Example: print 'Hello welcome to Hedy.'"
         demo_code: "print 'Hello welcome to Hedy.'"
       -
-        name: "is"
         explanation: "Give a name to some text and `print` without quotation marks"
         example: "Example: name is Hedy."
         demo_code: "name is Hedy\nprint 'my name is ' name"
       -
-        name: "ask"
         explanation: "Ask something with `ask`."
         example: "Example: color is ask What is your favorite color?"
         demo_code: "color is ask What is your favorite color?\nprint color ' is your favorite!'"
@@ -61,17 +52,14 @@
     intro_text: "`ask` and `print` work exactly like they did in Level 3. Level 4 adds the `if` statement!"
     commands:
       -
-        name: "print"
         explanation: "Print exactly using quotation marks"
         example: "Example: print 'Hello welcome to Hedy.'"
         demo_code: "print 'Hello welcome to Hedy.'"
       -
-        name: "ask"
         explanation: "Ask something with `ask`."
         example: "Example: color is ask What is your favorite color?"
         demo_code: "color is ask What is your favorite color?\nprint color ' is your favorite!'"
       -
-        name: "if"
         explanation: "Make a choice with `if`"
         example: "Example: if color is green print 'pretty!' else print 'meh'"
         demo_code: "color is ask What is your favorite color?\nif color is green print 'pretty!' else print 'meh'"
@@ -80,22 +68,18 @@
     intro_text: "`ask`, `print` and `if` work exactly like they did in Level 4. But Level 5 adds the `repeat` command. Repeat can be used to execute a line of code multiple times."
     commands:
       -
-        name: "print"
         explanation: "Print exactly using quotation marks"
         example: "Example: print 'Hello welcome to Hedy.'"
         demo_code: "print 'Hello welcome to Hedy.'"
       -
-        name: "ask"
         explanation: "Ask something with `ask`."
         example: "Example: color is ask What is your favorite color?"
         demo_code: "color is ask What is your favorite color?\nprint color ' is your favorite!'"
       -
-        name: "if"
         explanation: "Make a choice with `if`"
         example: "Example: if color is green print 'pretty!' else print 'meh'"
         demo_code: "color is ask What is your favorite color?\nif color is green print 'pretty!' else print 'meh'"
       -
-        name: "repeat"
         explanation: "`repeat` and `if` combined"
         example: "Example: if color is green repeat 3 times print 'pretty!' else repeat 5 times print 'meh'"
         demo_code: "color is ask What is your favorite color?\nif color is green repeat 3 times print 'pretty!' else repeat 5 times print 'meh'"
@@ -104,17 +88,14 @@
     intro_text: "`ask`, `print`, `if` and `repeat` are still the same as in Level 4 and 5. Level 6 adds something new... You can now calculate."
     commands:
       -
-        name: "print"
         explanation: "Print exactly using quotation marks"
         example: "Example: print '5 times 5 is ' 5 * 5"
         demo_code: "print '5 times 5 is ' 5 * 5"
       -
-        name: "`ask` and `if` with calculations"
         explanation: "Ask for a calculation and check that it is correct."
         example: "Example: answer is ask What is 10 plus 10?"
         demo_code: "answer is ask What is 10 plus 10?\nif answer is 20 print 'Yes!' else print 'Oops'"
       -
-        name: "repeat"
         explanation: "`repeat` and `if` combined"
         example: "Example: if product is 50 repeat 3 times print 'correct!' else repeat 5 times print 'incorrect!'"
         demo_code: "product is ask What is 10 times 5?\nif product is 50 repeat 3 times print 'correct!' else repeat 5 times print 'incorrect!'"
@@ -123,17 +104,14 @@
     intro_text: "ask and print still work as you know them. But if and repeat have changed! You can now execute groups of code together, but you will have to indent the code. That means putting four spaces at the beginning of the line. This also holds when you just want to create a block of one line. If you combine a repeat and an if, you will need to indent each block. Have a look at the example code for more details!"
     commands:
       -
-        name: "print"
         explanation: "Print something. Remember to use a quotation mark for literal printing."
         example: "Example: print '5 times 5 is ' 5 * 5"
         demo_code: "print '5 times 5 is ' 5 * 5"
       -
-        name: "`if` with multiple lines"
         explanation: "Ask for the answer to a sum and check if it is correct. We can now print 2 lines."
         example: "Example: answer is ask What is 5 plus 5?"
         demo_code: "answer is ask What is 5 plus 5?\nif answer is 10\n    print 'Well done!'\n    print 'Indeed, the answer was ' answer\nelse\n    print 'Oops!'\n    print 'The answer is 10'"
       -
-        name: "if and repeat combined"
         explanation: "`if` and `repeat` combined"
         example: "Example: if color is green repeat 3 times print 'pretty!' else repeat 5 times print 'meh'"
         demo_code: "color is ask What is your favorite color?\nif color is green\n    repeat 3 times\n        print 'pretty!'\nelse\n    repeat 5 times\n        print 'meh'"
@@ -145,7 +123,6 @@
       Remember to use indentations after the `for` and `if` statements (That means starting a sentence with four spaces)"
     commands:
            -
-             name: "repeat"
              explanation: "we replace `repeat` with `for`"
              example: "for i in range 1 to 10"
              demo_code: |
@@ -156,51 +133,43 @@
     start_code: "for i in range 1 to 10:\n    print i\nprint 'Ready or not, here I come!'"
     intro_text: "Now we are going to change a little bit with indentation. Every time that we need an indentation, we need `:` at the line before the indentation."
     commands:
-      - name: "for with :"
-        explanation: "When we use a `for`, we need to put a `:` behind the `for` statement!"
+      - explanation: "When we use a `for`, we need to put a `:` behind the `for` statement!"
         example: "for i in range 1 to 10:"
         demo_code: "for i in range 1 to 11:\n    print i\nprint 'Ready or not, here I come!'"
-      - name: "if with :"
-        explanation: "We need to do the same with all of our `if` statements"
+      - explanation: "We need to do the same with all of our `if` statements"
         example: "if colour is green:'"
         demo_code: "colour is green\nif colour is green:\n    print 'The colour is green'\nelse:\n    print 'The colour is not green'"
-      - name: "(Optional) elif"
+      -
         explanation: "We will show you a new command that you are allowed to use: `elif`. `elif` means \"else if\". We start with checking if the `if` is correct, if that one is not true, we check the `elif` and if that one is also not true, we go to the `else`."
         example: "elif a is 5:"
         demo_code: "a is 2\nif a is 1:\n    print 'a is 1'\nelif a is 2:\n    print 'a is 2'\nelse:\n    print 'a is not 1 or 2'"
   10:
     start_code: "for i in range 1 to 3:\n    for j in range 1 to 5:\n    print 'we are in round: ' i ' and we count: ' j"
     intro_text: "From now on, we can repeat a loop more often. In the example we count to 5 and do that 3 times. So we do 3 rounds and count to 5 every time."
     commands:
-      - name: "for under eachother"
-        explanation: "This is an example with the for statement"
+      - explanation: "This is an example with the for statement"
         demo_code: "for i in range 1 to 3:\n    for j in range 1 to 5:\n    print 'we are in round: ' i ' and we count: ' j"
-      - name: "if under eachother"
-        explanation: "We can do the same with if statements"
+      - explanation: "We can do the same with if statements"
         demo_code: "colour is blue\ncolourtwo is yellow\nif colour is blue:\n    if colourtwo is yellow:\n        print 'Together we make green!'"
   11:
     start_code: "age is input('What is your age?')\nprint('So you have been these ages:')\nfor i in range(0,age):\n    print(i)"
     intro_text: "We are going to put round brackets and we are going to change ask! We change ask into input! At print, ask and for, we are going to put round brackets now."
     commands:
-      - name: "Print"
-        explanation: "We are going to put brackets around print now!"
+      - explanation: "We are going to put brackets around print now!"
         example: "For example: print('Hello World')"
         demo_code: "print('Hello World')"
-      - name: "Ask to input!"
-        explanation: "We remove ask and call it input now, also we are going to put brackets around it"
+      - explanation: "We remove ask and call it input now, also we are going to put brackets around it"
         example: "For example: answer is input('What is your name?')"
         demo_code: "answer = input('What is your name?')\nprint('So your name is ' answer)"
-      - name: "For with brackets"
-        explanation: "We are now putting brackets around the numbers in the for loop. for i in range (0,10):"
+      - explanation: "We are now putting brackets around the numbers in the for loop. for i in range (0,10):"
         example: "For example: for i in range(0,10):"
         demo_code: "for i in range(0,10):\n    print(i)\nprint('Ready or not, here I come')"
 
   12:
     start_code: "fruit is ['apple', 'banana', 'cherry']\nprint(fruit)"
     intro_text: "We are going to put square brackets around lists! Also we now need to put single quotation marks (') around items in lists. "
     commands:
-      - name: "Square brackets around lists"
-        explanation: "We are going to put square brackets around lists! We also need to put ' around items in lists."
+      - explanation: "We are going to put square brackets around lists! We also need to put ' around items in lists."
         example: "For example: fruit is ['apple', 'banana', 'cherry']"
         demo_code: "fruit is ['apple', 'banana', 'cherry']\nprint(fruit)"
       - name: "Get an item from a list"

coursedata/texts/de.yaml

@@ -12,12 +12,13 @@ ui:
   regress_button: "Gehe eine Stufe zurück"
   advance_button: "Gehe zu Stufe"
   advance_step_button: "Gehe zu Aufgabe"
-  try_button: "Versuche das"
+  try_button: "Versuchen"
   enter_text: "Gib deine Antwort hier ein..."
   enter: "Eingabe"
   assignment_header: "Aufgabe"
   show_explanation: "Show explanation"
   hide_explanation: "Hide explanation"
+  commands_title: "Kommandos"
 ClientErrorMessages:
   Transpile_warning: "Warnung!"
   Transpile_error: "Wir konnten Ihr Hedy-Programm nicht lesen."

coursedata/texts/en.yaml

@@ -12,12 +12,13 @@ ui:
   regress_button: "Go back to level"
   advance_button: "Go to level"
   advance_step_button: "Go to assignment"
-  try_button: "Try this"
+  try_button: "Try"
   enter_text: "Enter your answer here..."
   enter: "Enter"
   assignment_header: "Assignment"
   show_explanation: "Show explanation"
   hide_explanation: "Hide explanation"
+  commands_title: "Commands"
 ClientErrorMessages:
   Transpile_warning: "Warning!"
   Transpile_error: "We can't run your program."

coursedata/texts/es.yaml

@@ -12,12 +12,13 @@ ui:
   regress_button: "Regresar al nivel"
   advance_button: "Ir al nivel"
   advance_step_button: "Ir a la tarea"
-  try_button: "Prueba esto"
+  try_button: "Pruebar"
   enter_text: "Ingrese su respuesta aquí..."
   enter: "Ingresar"
   assignment_header: "Asignación"
   show_explanation: "Mostrar explicación"
   hide_explanation: "Ocultar explicación"
+  commands_title: "Comandos"
 ClientErrorMessages:
   Transpile_warning: "Atención!"
   Transpile_error: "El servidor no puede traducir este programa."

coursedata/texts/fr.yaml

@@ -12,12 +12,13 @@ ui:
   regress_button: "Retourner au niveau"
   advance_button: "Aller au niveau"
   advance_step_button: "Aller au devoir"
-  try_button: "Essaye ceci"
+  try_button: "Essayer"
   enter_text: "Tapes ta réponse ici..."
   enter: "Enter"
   assignment_header: "Exercice"
   show_explanation: "Montrer l'explication"
   hide_explanation: "Cacher l'explication"
+  commands_title: "Commandos"
 ClientErrorMessages:
   Transpile_warning: "Attention!"
   Transpile_error: "Le serveur n’a pas pu traduire ce code."

coursedata/texts/it.yaml

@@ -12,12 +12,13 @@ ui:
   regress_button: "Torna a livello"
   advance_button: "Vai a livello"
   advance_step_button: "Vai a compito"
-  try_button: "Prova questo"
+  try_button: "Provar"
   enter_text: "Inserisci la risposta qui..."
   enter: "Invio"
   assignment_header: "Compito"
   show_explanation: "Mostra spiegazione"
   hide_explanation: "Nascondi spiegazione"
+  commands_title: "Commandos"
 ClientErrorMessages:
   Transpile_warning: "Attenzione!"
   Transpile_error: "Non possiamo eseguire il tuo programma."

coursedata/texts/nl.yaml

@@ -6,7 +6,7 @@ ui:
   docs_title: "Uitleg"
   contact: "Contact"
   video_title: "Video's"
-  try_button: "Probeer dit"
+  try_button: "Probeer"
   run_code_button: "Voer de code uit"
   save_code_button: "Code opslaan"
   untitled: "Naamloos"
@@ -18,6 +18,7 @@ ui:
   assignment_header: "Opdracht"
   show_explanation: "Toon uitleg"
   hide_explanation: "Verberg uitleg"
+  commands_title: "Commando's"
 ClientErrorMessages:
   Transpile_warning: "Let op!"
   Transpile_error: "We konden je code niet goed lezen."
@@ -119,12 +120,12 @@ Programs:
   recent: "Mijn programma's"
   level: "Level"
   minutes: "minuten"
-  hours: "uuren"
+  hours: "uren"
   days:  "dagen"
   ago-1: ""
   ago-2: "geleden"
   open: "Openen"
   delete: "Verwijderen"
-  delete_confirm: "Weet u zeker dat je het programma wil verwijderen?"
+  delete_confirm: "Weet je zeker dat je het programma wil verwijderen?"
   no_programs: "Nog geen programma's."
   write_first: "Schrijf je eerste programma!"

coursedata/texts/pt_br.yaml

@@ -12,12 +12,13 @@ ui:
   regress_button: "Voltar para o nível"
   advance_button: "Ir para o nível"
   advance_step_button: "Ir para tarefa"
-  try_button: "Tente isso"
+  try_button: "Tenter"
   enter_text: "Entre com a sua resposta aqui..."
   enter: "Entrar"
   assignment_header: "Tarefa"
   show_explanation: "Mostrar explicação"
   hide_explanation: "Esconder explicação"
+  commands_title: "Comandos"
 ClientErrorMessages:
   Transpile_warning: "Aviso!"
   Transpile_error: "O servidor não pode traduzir este programa."

static/js/app.js

@@ -128,6 +128,18 @@ function runit(level, lang, cb) {
   }
 }
 
+/**
+ * Called when the user clicks the "Try" button in one of the palette buttons
+ */
+function tryPaletteCode(exampleCode) {
+  var editor = ace.edit("editor");
+
+  var MOVE_CURSOR_TO_END = 1;
+  editor.setValue(exampleCode + '\n', MOVE_CURSOR_TO_END);
+  window.State.unsaved_changes = false;
+}
+
+
 window.saveit = function saveit(level, lang, name, code, cb) {
   error.hide();
 

tailwind/styles.css

@@ -182,18 +182,8 @@ table.users td {
   border: solid 1px gray;
 }
 
-/* RESTORE OLD COLORS */
-
-.bg-blue-500 {
-  background-color: #4299e1;
-}
-
-.bg-blue-400 {
-  background-color: #63b3ed;
-}
-
-.bg-gray-400 {
-  background-color: #cbd5e0;
+.right-hand-shadow {
+  box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
 }
 
 /* EDITOR WARNINGS & ERRORS */

tailwind/tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
       // We only need a few breakpoints
       sm: '640px',
       lg: '1024px',
+      xl: '1280px',
     },
   },
   variants: {},

templates/auth.html

@@ -1,7 +1,9 @@
 {% extends "layout.html" %}
 
 {% block body %}
+<div class="px-8 py-12">
 {% block main %}{% endblock %}
+</div>
 {% endblock %}
 {% block scripts %}
   <script src="/vendor/jquery.min.js" type="text/javascript"></script>