jess_intro.yaml

title: "Intro to Jess and JavaScript"
author: "Ferran Maylinch"

lessonVersion: "1.0"
minAppVersion: "1.4"

exercises:

  - title: "Intro to Jess"

    intro:
      - text: "**Jess** is an app where you will be able to learn programming using [JavaScript](https://www.javascript.com/)."
      - image: "http://i.imgur.com/WEA5N6k.png"
      - text: "The main goal of Jess is to **teach you programming**, and Javascript is the most popular programming language, so it's a safe bet."
      - text: "From the Jess app you will **download lessons** that contain exercises. Try to solve the exercises in order, since they will be increasingly more advanced."
      - text: "In some exercises you may find pieces of read-only code like this:"
      - code: |
          log("Jess");
      - text: "At the end of each exercise you fill find the instructions of the task you need to do:"

    task:
      - text: "Your task is to write the necessary code in the **editor** (the dark blue view below) to solve the exercise."
      - text: >
          This exercise will be easy. Just **type your name between the quotes**, like in the example code you saw
          before but now with your name. Then **click the `RUN` button**.

    initialCode: |
      // Write your name inside the quotes
      log("");

    check: |
      function(jess) {
        if (jess.logs.length >= 1 && jess.logs[0]) {
          return { ok:true, name:jess.logs[0] };
        } else if (jess.logs.length > 1) {
          return { ok:false, message:"Use the `log` function just once" };
        } else if (jess.logs.length === 0 || jess.logs[0].length == 0) {
          return { ok:false, message:"Write something inside the quotes." };
        }
      }

    explanation:
      - text: "Well done **{{name}}**!"
      - text: "Believe or not, you have run a program!"
      - text: >
          You saw that a brown area appeared and your name was displayed there.
          That's the *console*. **The console is where a program displays messages**.
          And you use **the `log` function to print messages**. We will use the `log` function a lot in our exercises.
      - text: >
          Ok, this exercise was easy, but little by little you will learn a lot here with the Jess app lessons.
          That was the first step of the deep and fun world of programming.
      - text: "What are we waiting for. Let's head straight to the next exercise! Use your back button to return to the list of exercises."


  - title: "Intro to JavaScript"

    intro:
      - text: "With a programming language like JavaScript your can write programs."
      - text: >
          **A program is a list of statements**. Each statement tells the computer to do something,
          like printing a message, sum two numbers, change the color of a text, resize an image, etc.
      - text: >
          So far we have seen a statement to print messages on the console. In JavaScript you use the `log` function to do that.
          A program can have multiple statements, so you can use `log` more than once, like this:
      - code: |
          log("one message");
          log("another message");

    task:
      - text: >
          Your task in this exercise is to **print the current day, month and year**.
          Use the `log` function **3 times** to print these messages:
      - text: |
          1) The current day number (like `13`)
          2) The current month (like `July`)
          3) The current year (like `2018`)

    check: |
      function(jess) {
      
        var months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
        var today = new Date();

        if (jess.logs.length != 3) {
          return { ok:false, message:"Use the `log` function 3 times" };
        } else if (jess.logs[0] != today.getDate()) {
          return { ok:false, message:"The first thing you should print is today's number and it's not right" };
        } else if (!jess.logs[1] || jess.logs[1].toString().toLowerCase() !== months[today.getMonth()]) {
          return { ok:false, message:"The second thing you should write is the current month name and it's not right" };
        } else if (jess.logs[2] != today.getFullYear()) {
          return { ok:false, message:"The last thing you should write is the current year (four digits) and it's not right" };
        } else {
          return { ok:true };
        }
      }

    explanation:
      - text: "Awesome! You're getting the hang of it!"


  - title: "Print numbers"

    intro:
      - text: "So far we have printed *texts* (also called *strings*) and *numbers*."
      - text: >
          **When using numbers you don't need quotes**. In fact, you usually shouldn't use them. Later you will see why.
          Here's a statement that prints the number `10`. Notice we don't include the quotes.
      - code: "log(10);"
      - text: >
          Now, with numbers we can also use some basic **math operators** like **`+ - * /`**.
          For example, the next statement also prints the number `10`.
      - code: "log(5 + 5); // prints 10"
      - text: "That statement first calculates the result of `5 + 5` and then prints that result."

    task:
      - text: >
          Your task in this exercise is to **print the number `10` two times**. To make it interesting, use different
          math operations that result in 10, **don't use 10 directly**. For example, you may use `20 / 2` or `13 - 3`.

    check: |
      function(jess) {
        if (jess.logs.length != 2) {
          return { ok:false, message:"Use the `log` function 2 times" };
        } else if (jess.logs[0] != 10 || jess.logs[1] != 10) {
          return { ok:false, message:"You should print the number 10 two times" };
        } else if (/\D10\D/.test(jess.userCode)) {
          return { ok:false, message:"For this exercise you can't use the number 10 itself" };
        } else {
          return { ok:true };
        }
      }

    explanation:
      - text: "Perfect!"
      - text: "You can also try to combine more than one operator in the same statement, like:"
      - code: "log(10 + 5 - 3); // prints 12"
      - text: "If you do that, you need to know that the operators `* /` have precedende over (are performed before) the operators `+ -`. For example:"
      - code: |
          log(2 * 3 + 4); // prints 10
          log(4 + 2 * 3); // prints 10
          // Use parenthesis to change it:
          log((4 + 2) * 3); // prints 18
      - text: "Well, that's enough of maths. Don't be afraid, since programming usually doesn't require more maths than that."


  - title: "Intro to variables"

    intro:
      - text: "**Variables** are crucial in programming. They are used to *store* values that can be recovered or modified later."
      - text: "For example, we have seen that you can print something with the `log` function:"
      - code: |
          log("Paris");
      - text: >
          You could store the value `"Paris"` inside a variable and then pass it to the `log` function, like this:
      - code: |
          var city;       // declare
          city = "Paris"; // assign
          log(city);      // use
      - text: >
          In the previous example you can see that to use a variable you first **declare** (create) it using the
          **`var`** keyword followed by the name you choose for the variable (you should pick a meaningful name).
          Then you can **assign** (store) a value to the variable.
          After that, you can **use** the value you have put inside the variable, that is, you can recover the
          value you assigned (stored) before. 
          In this case we pass the value to the `log` function so it is printed.

    task:
      - text: >
          To practice the use of variables, **declare a variable named `day`, assign the current day number to it
          and then print it**.

    check: |
      function(jess) {
      
        var todayDay = new Date().getDate();
      
        if ( typeof(day) === 'undefined' ) {
          return { ok:false, message:"You didn't declare the variable `day` or you didn't assign anything to it." };
        } else if ( typeof(day) !== 'number' ) {
          return { ok:false, message:"You didn't asign a number to `day` (don't use quotes for numbers)." };
        } else if (day < 1 || day > 31) {
          return { ok:false, message:"The number you assigned is not a correct day number" };
        } else if (todayDay !== day) {
          return { ok:false, message:"Almost! You assigned " + day + " but that's not today" };
        } else if (jess.logs.length != 1) {
          return { ok:false, message:"Use the `log` function once to print the day" };
        } else if (jess.logs[0] !== todayDay) {
          return { ok:false, message:"Use the `log` to print the `day` variable" };
        } else if ( new RegExp("log *\\( *" + todayDay + " *\\)").test(jess.userCode) ) {
          return { ok:false, message:"Don't print the day number directly, pass the `day` variable to the `log` function" };
        } else {
          return { ok:true, todayDay:todayDay.toString() };
        }
      }

    explanation:
      - text: "Fantastic!"
      - text: "You can also **declare** and **assign** a value to a variable in the same statement, like this:"
      - code: "var day = {{todayDay}};"
      - text: "The name of a variable has to start with a lower case letter, followed by letters and numbers."
      - text: "Due to convention rules, if the name of the variable needs multiple words, you will write them like this:"
      - code: |
          var mimimumAge;
          var firstName;
          var playerShieldPower;
      - text: "As you see, the first word is in lower case, and the following ones are together with the first capital letter."


  - title: "More about variables"

    intro:
      - text: "Let's review variables a little bit before moving on, because they are very important."
      - text: "**Declaration**"
      - text: >
          In Javascript, like in most languages, you have to *declare* a variable before using it.
          In Javascript you use the **`var`** keyword for that. Keywords are reserved words for special things,
          so you can't use them as variable names.
      - text: >
          Notice that you don't specify the type of values you will put into the variable (number, string, etc).
          In some languages you have to specify that but not in Javascript. So you write:
      - code: |
          // declaration is the same 
          var name;
          var age;
          
          // assign different types
          name = "Susan";
          age = 15;
      - text: "**Assignment**"
      - text: >
          When you assign a value to a variable is like you put something into a container.
          You can imagine a variable like a box. A box with a label. The label is the name of the variable,
          that reminds you what you stored in that box.
      - text: "So, when you write:"
      - code: "age = 15:"
      - text: >
          You are storing the number 15 into the variable age (imagine that you are putting the number 15 inside a box
          labeled age). Don't say *"`age` is equal to `15`"* because that's confusing. Say *"I put `15` into `age`"*
          or *"I assign `15` to `age`'"*.

    task:
      - text: >
          Let's practice with variables again. Declare two variables, named `lastName` and `height`, and assign the values
          `"Gasol"` and `213` to them, respectively.

    check: |
      function(jess) {
        if ( typeof(lastName) === 'undefined' || typeof(height) === 'undefined' ) {
          if ( typeof(lastname) !== 'undefined' ) {
            return { ok:false, message:"Careful, case matters in variables: you declared `lastname` but it's `lastName` with a capital N." };
          } else {
            return { ok:false, message:"You didn't declare `lastName` and `height` or didn't assign values to both of them." };
          }
        } else if ( typeof(lastName) !== 'string' ) {
          return { ok:false, message:"You didn't asign a string to `lastName`." };
        } else if ( typeof(height) !== 'number' ) {
          return { ok:false, message:"You didn't asign a number to `height` (don't use quotes for numbers)." };
        } else if ( lastName.toLowerCase() !== "gasol" ) {
          return { ok:false, message:"The string you assigned to `lastName` is not 'Gasol' (case doesn't matter)." };
        } else if ( height !== 213 && height !== 2.13  ) {
          return { ok:false, message:"The number you assigned to `height` is not 213" };
        } else {
          return { ok:true };
        }
      }

    explanation:
      - text: "You are a *variable* expert!"
      - text: "If you want decimals in a number, you can use a dot:"
      - code: "var height = 2.13; // in meters"


  - title: "Update variables"

    intro:
      - text: "**Variables can be modified**. In other words, we can change the value they contain."
      - text: "A variable can only contain **one value at a time**, so when we set another, the last one is lost:"
      - code: |
          var amount = 100;
          log(amount); // prints 100
          amount = 200;
          log(amount); // prints 200
      - text: "As you can see, when we use a variable, we get the last value we set to it."
      - text: "We can also take the value of a variable, modify it in some way, and store the result in another variable."
      - code: |
          var amount = 100;
          var amount2 = amount + 50;
          log(amount2); // prints 150
          // amount still has 100:
          log(amount); // prints 100
      - text: "In the example above, we set 100 to `amount`, and then add 50 to it and store the result in `amount2`."
      - text: "But we could also store the result in the *same* variable:"
      - code: |
          var amount = 100;
          log(amount); // prints 100
          amount = amount + 50; // add 50
          log(amount); // prints 150
      - text: >
          In that last example, we set 100 to `amount`, and then add 50 and store the result in `amount` again.
          Notice that when we change the amount to 150 (because we add 50 to the 100 it contains) the last value of 100
          is lost, but we could print it before we changed it.

    task:
      - text: "Now it's your turn to practice variable changes."
      - text: "I have declared a variable below. Don't touch that statement. Do the following afterwards:"
      - text: |
          1) Print the value that `money` contains now.
          2) Multiply the value x 2 (using the operator `*`) and assign the value to the same `money` variable.
          3) Print the value after that modification.
      - text: "Don't declare any other variable. Use only the `money` variable I created."

    initialCode: |
      var money = 1000;

    check: |
      function(jess) {

        function test(regex) {
          return regex.test(jess.userCode);
        }

        if ( test( /log\( *1000 *\)/ ) ) {
          return { ok:false, message:"Don't print 1000 directly. Print the variable `money`." };
        } else if ( test( /\D2000\D/ ) ) {
          return { ok:false, message:"Don't print or use the number 2000 directly. Modify the variable `money` and print it." };
        } else if ( typeof(money) !== "number" ) {
          return { ok:false, message:"Did you remove the variable `money` or assigned anything other than a number?" };
        } else if ( money !== 2000 ) {
          return { ok:false, message:"At the end of the program the variable `money` should contain the number 2000" };
        } else if ( jess.logs.length != 2 ) {
          return { ok:false, message:"You need to use the `log` function 2 times" };
        } else if ( jess.logs[0] != 1000 || jess.logs[1] != 2000 ) {
          return { ok:false, message:"You should print the `money` variable with its current value (1000), and then print its value after you double it (2000)." };
        } else if ( !test( /money *= * money *\* *2/ ) && !test( /money *= * 2 *\* *money/ )  ) {
          return { ok:false, message:"The variable contains 2000, although I expected this assignment: `money = money * 2;`" };
        } else {
          return { ok:true };
        }
      }

    explanation:
      - text: "No doubt you're made for this!"
      - text: >
          As you have seen, you can assign the result of an operation that combines variables and numbers.
          Here's another example:
      - code: |
          // game rating
          var graphics = 7.5;
          var sound = 8;
          var gameplay = 9.5;
          var overall = (graphics + sound +
            gameplay) / 3;


  - title: "Adding strings"

    intro:
      - text: "The operator **`+`** can also be used to add (*concatenate*) strings. Example:"
      - code: |
          var text = "hello" + "world";
          log(text); // prints "helloworld"
      - text: "We can also use `+` to concatenate the value of a variable:"
      - code: |
          var name = "Jess";
          var text = "Hi I'm " + name;
          log(text); // prints "Hi I'm Jess"

          // Or directly:
          log("I'm " + name); // "I'm Jess"
      - text: "We can even concatenate strings and numbers (numbers are converted to text):"
      - code: |
          var name = "Julie";
          var age = 20;
          log(name + " is " + age " years old");

    task:
      - text: >
          Similar to the last example, declare the variables `title` and `pages`, assign values to them and then
          print a text like "The book Perfume has 350 pages".
      - text: "You can assign any title and number of pages, but make sure the text you print has that structure."

    check: |

      function(jess) {

        if ( typeof(title) === 'undefined' || typeof(pages) === 'undefined' ) {
          return { ok:false, message:"You didn't declare `title` and `pages` or didn't assign values to both of them" };
        }

        if ( typeof(title) !== 'string' ) {
          return { ok:false, message:"You didn't asign a string to `title`" };
        }

        if ( typeof(pages) !== 'number' ) {
          return { ok:false, message:"You didn't asign a number to `pages` (remember, don't use quotes for numbers)" };
        }

        if ( jess.logs.length != 1 ) {
          return { ok:false, message:"You need to use the `log` function one time" };
        }

        var book = "book " + title + " has " + pages + " pages";
        var expected = "The " + book;

        if (jess.userCode.indexOf(book) >= 0) {
          return { ok:false, message:"Don't print the text literally. Concatenate the variables together with text to build the resulting message to print." };
        }

        if ( jess.logs[0].toLowerCase() !== expected.toLowerCase() ) {
          return { ok:false, message:"You didn't print the text I expected. Look at the example and try again." };
        }

        var bookMessage;

        if (pages >= 500) {
          bookMessage = "The book " + title + " seems quite long. Anyway, I may give it a try.";
        } else if (pages <= 100) {
          bookMessage = "The book " + title + " is quite short. I'll check it out.";
        } else {
          bookMessage = "I haven't read the book " + title + " but I'll give it a try."
        }
      
        return { ok:true, bookMessage: bookMessage };
      }

    explanation:
      - text: "That's it!"
      - text: "{{bookMessage}}"
      - text: "These kind of combinations with literal text, strings and numbers are very common in programming."
      - text: "This is the last exercise in this lesson. **Let's review what we have learnt**:"
      - text: |
          - A program is a list of statements.
          - The statements are executed in order.
          - There are different kinds of statements to:
            - Print a message
            - Declare a variable
            - Assign a value to a variable
          - You can declare and assign at once.
          - You can update a variable multiple times.
          - You can perform math operations with numbers.
          - You can concatenate strings (and also numbers).
      - text: "Look for more lessons. Don't stop learning on the go!"