{
  "rpc": {
    "loading": [],
    "error": null
  },
  "book": {
    "server": {
      "hints": [],
      "step_index": 0,
      "pages_progress": [
        2,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "page_index": 2,
      "showEditor": false,
      "showSnoop": false,
      "showPythonTutor": false,
      "showBirdseye": true
    },
    "pages": [
      {
        "slug": "IntroducingTheShell",
        "title": "Introducing The Shell",
        "index": 0,
        "step_texts": [
          "<p>At the bottom right of the screen is the <em>shell</em>. This is a place for running small bits of Python code. Just type in some code, press enter, and it'll run! Try it now:</p>\n<ol>\n<li>Click anywhere on the shell (the black area).</li>\n<li>Type <code>1+2</code></li>\n<li>Press the Enter key on your keyboard.</li>\n</ol>",
          "<p>Great! Python evaluated <code>1+2</code> and got the result <code>3</code>, so the shell displays that.</p>\n<p>The shell is probably your most important tool for learning Python, and you should spend lots of time experimenting and exploring in it. Be curious! Constantly ask yourself \"What would happen if I ran X?\" and then immediately answer that question by running it! Never be scared to try something out - if you get something wrong, nothing bad will happen.</p>\n<p>Try doing some more calculations now. You can multiply numbers with <code>*</code>, divide with <code>/</code>, and subtract with <code>-</code>. You can also use parentheses, i.e. <code>(</code> and <code>)</code>.</p>",
          "<p>Excellent! Keep experimenting. When you're ready, click 'Next' to continue.</p>"
        ]
      },
      {
        "slug": "NavigatingShellHistory",
        "title": "Navigating Shell History",
        "index": 1,
        "step_texts": [
          "<p>Here's a tip: often you will want to re-run a previously entered bit of code, or a slightly modified version of it. You can copy and paste, but that's tedious and gets in the way of experimenting. A better method is to press the Up Arrow key on your keyboard. This will insert the previous line of code into the shell. Keep pressing it to go further back in your history, and if you go too far, press the Down Arrow key to go the other way. Try using it now.</p>"
        ]
      },
      {
        "slug": "IntroducingStrings",
        "title": "Introducing Strings",
        "index": 2,
        "step_texts": [
          "<p>Python lets you do much more than calculate. In fact, we're not going to touch numbers or maths for a while. Instead, we're going to look at <em>strings</em>. Strings are essentially snippets of text. For example, enter the following into the shell, quotes (<code>'</code>) included:</p>\n<pre><code>'hello'\n</code></pre>",
          "<p>The shell simply gives the same thing back because there's nothing to further to calculate. <code>'hello'</code> is simply equal to <code>'hello'</code>.</p>\n<p>A string is a sequence of characters. A character is a single symbol such as a letter, number, punctuation, space, etc. In this case the string contains the 5 characters <code>hello</code>. The quotes are not part of the string - they are there to tell both humans and computers that this is a string consisting of whatever characters are between the quotes.</p>"
        ]
      },
      {
        "slug": "AddingStrings",
        "title": "Adding Strings",
        "index": 3,
        "step_texts": [
          "<p>Strings can be added together using <code>+</code>, although this means something very different from adding numbers. For example, try:</p>\n<pre><code>'hello' + 'world'\n</code></pre>",
          "<p>You can see that <code>+</code> combines or joins two strings together end to end. Technically, this is called concatenation.</p>\n<p>Here's an exercise: change the previous code slightly so that the result is the string <code>'hello world'</code>, i.e. with a space between the words.</p>\n<p>By the way, if you get stuck, you can click the lightbulb icon in the bottom right for a hint.</p>",
          "<p>Well done! Any of the following are valid solutions:</p>\n<pre><code>'hello ' + 'world'\n'hello' + ' world'\n'hello' + ' ' + 'world'\n</code></pre>"
        ]
      },
      {
        "slug": "IntroducingVariables",
        "title": "Introducing Variables",
        "index": 4,
        "step_texts": [
          "<p>To make interesting programs, we can't always manipulate the same values. We need a way to refer to values that are unknown ahead of time and can change - values that can vary. These are called <em>variables</em>.</p>\n<p>Run this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>",
          "<p>This creates a variable with the name <code>word</code> that refers to the string value <code>'Hello'</code>.</p>\n<p>Check now that this is true by simply running <code>word</code> in the shell by itself.</p>",
          "<p>Good. For comparison, run <code>'word'</code> in the shell by itself, with the quotes.</p>",
          "<p>As you can see, the quotes make all the difference. <code>'word'</code> is literally just <code>'word'</code>, hence it's technically called a <em>string literal</em>. On the other hand, <code>word</code> is a variable, whose value may be anything.</p>\n<p>Similarly, <code>'sunshine'</code> is <code>'sunshine'</code>, but what's <code>sunshine</code> without quotes?</p>",
          "<p>The answer is that <code>sunshine</code> looks like a variable, so Python tries to look up its value, but since we never defined a variable with that name we get an error.</p>"
        ]
      },
      {
        "slug": "UsingVariables",
        "title": "Using Variables",
        "index": 5,
        "step_texts": [
          "<p>Previously we made a variable called <code>word</code> with the value <code>'Hello'</code> with this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>\n<p>Now make a variable called <code>your_name</code> whose value is another string.</p>\n<p>(The character <code>_</code> in <code>your_name</code> is called an <em>underscore</em>. Use it to separate words when you want a variable name containing multiple words. You can type it on most keyboards by pressing Shift and hyphen/dash/minus (<code>-</code>).)</p>",
          "<p>You can use variables in calculations just like you would use literals. For example, try:</p>\n<pre><code>'Hello ' + your_name\n</code></pre>",
          "<p>Or you can just add variables together. Try:</p>\n<pre><code>word + your_name\n</code></pre>",
          "<p>Oops...that doesn't look nice. Can you modify the code above so that there's a space between the word and your name?</p>",
          "<p>Perfect!</p>\n<p>Variables can also change their values over time. Right now <code>word</code> has the value <code>'Hello'</code>. You can change its value in the same way that you set it for the first time. Run this:</p>\n<pre><code>word = 'Goodbye'\n</code></pre>",
          "<p>Now observe the effect of this change by running <code>word + ' ' + your_name</code> again.</p>",
          "<p>Those quotes around strings are getting annoying. Try running this:</p>\n<pre><code>print(word + ' ' + your_name)\n</code></pre>",
          "<p>Hooray! No more quotes! We'll break down what's happening in this code later. For now just know that <code>print(&lt;something&gt;)</code> displays <code>&lt;something&gt;</code> in the shell. In particular it displays the actual content of strings that we usually care about, instead of a representation of strings that's suitable for code which has things like quotes. The word <code>print</code> here has nothing to do with putting ink on paper.</p>"
        ]
      },
      {
        "slug": "WritingPrograms",
        "title": "Writing Programs",
        "index": 6,
        "step_texts": [
          "<p>It's time to stop doing everything in the shell. In the top right you can see the <em>editor</em>. This is a place where you can write and run longer programs. The shell is great and you should keep using it to explore, but the editor is where real programs live.</p>\n<p>Copy the program below into the editor, then click the 'Run' button:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nprint(word + ' ' + name)\nword = 'Goodbye'\nprint(word + ' ' + name)\n</code></pre>",
          "<p>Congratulations, you have run your first actual program!</p>\n<p>Take some time to understand this program. Python runs each line one at a time from top to bottom. You should try simulating this process in your head - think about what each line does. See how the value of <code>word</code> was changed and what effect this had. Note that when <code>print</code> is used multiple times, each thing (<code>Hello World</code> and <code>Goodbye World</code> in this case) is printed on its own line.</p>\n<p>Some things to note about programs in the editor:</p>\n<ol>\n<li>The program runs in the shell, meaning that the variables defined in the program now exist in the shell with the last values they had in the program. This lets you explore in the shell after the program completes. For example, <code>name</code> now has the value <code>'World'</code> in the shell.</li>\n<li>Programs run in isolation - they don't depend on any previously defined variables. The shell is reset and all previous variables are cleared. So even though <code>word</code> currently exists in the shell, if you delete the first line of the program and run it again, you'll get an error about <code>word</code> being undefined.</li>\n<li>If you enter code in the shell and it has a value, that value will automatically be displayed. That doesn't happen for programs in the editor - you have to print values. If you remove <code>print()</code> from the program, changing the two lines to just <code>word + ' ' + name</code>, nothing will be displayed.</li>\n</ol>\n<p>I recommend that you check all of these things for yourself.</p>"
        ]
      },
      {
        "slug": "StoringCalculationsInVariables",
        "title": "Storing Calculations In Variables",
        "index": 7,
        "step_texts": [
          "<p>Often you will use variables to store the results of calculations. This will help to build more complex programs. For example, try this program:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nsentence = word + ' ' + name\nprint(sentence)\n</code></pre>",
          "<p>Now <code>sentence</code> has the value <code>'Hello World'</code> which can be used multiple times. Note that it will continue to have this value until it is directly reassigned, e.g. with another statement like <code>sentence = &lt;something&gt;</code>. For example, add these two lines to the end of the program:</p>\n<pre><code>word = 'Goodbye'\nprint(sentence)\n</code></pre>",
          "<p>Unlike a spreadsheet where formulas update automatically, a variable like <code>sentence</code> doesn't remember how it was calculated and won't change if the underlying values <code>word</code> or <code>name</code> are changed.</p>"
        ]
      },
      {
        "slug": "IntroducingForLoops",
        "title": "Introducing For Loops",
        "index": 8,
        "step_texts": [
          "<p>Good news! You've made it past the boring basics. We can start to write some interesting programs and have a bit of fun. One of the most powerful concepts in programming is the <em>loop</em>, which lets you repeat the same code over and over. Python has two kinds of loop: <code>for</code> loops and <code>while</code> loops. Here is an example of a for loop, try running this program:</p>\n<pre><code>name = 'World'\nfor character in name: print(character)\n</code></pre>",
          "<p>You can read the code almost like normal English:</p>\n<blockquote>\n<p>For each character in the string <code>name</code>, print that character.</p>\n</blockquote>\n<p>Each character is just a normal string. <code>character</code> is a normal variable that is given a new value before the code after the <code>:</code> runs. So the code above is equivalent to:</p>\n<pre><code>name = 'World'\n\ncharacter = 'W'\nprint(character)\n\ncharacter = 'o'\nprint(character)\n\ncharacter = 'r'\nprint(character)\n\ncharacter = 'l'\nprint(character)\n\ncharacter = 'd'\nprint(character)\n</code></pre>\n<p>Note that we could use a different variable name, <code>character</code> just makes it clearer.</p>\n<p>A for loop generally follows this structure:</p>\n<pre><code>for &lt;variable&gt; in &lt;collection&gt;: &lt;code to repeat&gt;\n</code></pre>\n<p>The <code>for</code>, <code>in</code>, and <code>:</code> are all essential.</p>"
        ]
      },
      {
        "slug": "Indentation",
        "title": "Indentation",
        "index": 9,
        "step_texts": [
          "<p>This example loop:</p>\n<pre><code>for character in name: print(character)\n</code></pre>\n<p>works, but actually it would usually (and should) be written like this:</p>\n<pre><code>for character in name:\n    print(character)\n</code></pre>\n<p>Specifically, the code to be repeated (known as the <em>body</em>) starts on a new line after the colon (<code>:</code>), and it must be <em>indented</em>, i.e. have some spaces before it. The code below without indentation is invalid, run it to see for yourself:</p>\n<pre><code>for character in name:\nprint(character)\n</code></pre>",
          "<p>The spaces are required to tell Python which lines of code belong to the body of the for loop. This is critical when the loop contains several lines, which it often will. For example, run this code:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>",
          "<p>There are two indented lines, so they're both part of the body, so <code>---</code> gets printed after each character. Now try running the same code without the indentation in the last line:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\nprint('---')\n</code></pre>",
          "<p>Since <code>print('---')</code> is not indented, it's not part of the loop body. This means it only runs once, after the whole loop has finished running. Both programs are valid, they just do different things.</p>\n<p>The program below is invalid. Both lines in the loop body are indented, but by different amounts. The first line starts with 4 spaces, the second line starts with 2. Try running it.</p>\n<pre><code>for character in name:\n    print(character)\n  print('---')\n</code></pre>",
          "<p>When you indent, you should always indent by 4 spaces. Any consistent indentation is actually acceptable, but 4 spaces is the convention that almost everyone follows. Note that the editor generally makes this easy for you. For example, if you press the 'Tab' key on your keyboard in the editor, it will insert 4 spaces for you.</p>"
        ]
      },
      {
        "slug": "BasicForLoopExercises",
        "title": "Basic For Loop Exercises",
        "index": 10,
        "step_texts": [
          "<p>Time for some exercises! Modify this program:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>\n<p>to instead output:</p>\n<pre><code>---W\n---o\n---r\n---l\n---d\n</code></pre>",
          "<p>Splendid! Now write a program which prints <code>name</code> once for each character in <code>name</code>. For example, for <code>name = 'Amy'</code>, it should output:</p>\n<pre><code>Amy\nAmy\nAmy\n</code></pre>\n<p>For <code>name = 'World'</code>, it should output:</p>\n<pre><code>World\nWorld\nWorld\nWorld\nWorld\n</code></pre>\n<p>By the way, you can set <code>name</code> to anything in the first line. Only the rest of the program after that will be checked.</p>",
          "<p>We're making really good progress! You're solving problems and writing new code!\nLet's keep making things more interesting.</p>"
        ]
      },
      {
        "slug": "BuildingUpStrings",
        "title": "Building Up Strings",
        "index": 11,
        "step_texts": [
          "<p>Before we look at some more loops, we need to quickly learn another concept. Look at this program:</p>\n<pre><code>hello = 'Hello'\nprint(hello)\nhello = hello + '!'\nprint(hello)\n</code></pre>\n<p>What do you think the line <code>hello = hello + '!'</code> does? What do you think the program will output? Make a prediction, then run it to find out.</p>",
          "<p>Python doesn't care that <code>hello</code> is on both the left and the right of the <code>=</code>, it just does what it would always do if the variables were different: it calculates <code>hello + '!'</code> which at the time is <code>'Hello' + '!'</code> which is <code>'Hello!'</code>, and that becomes the new value of <code>hello</code>. If it helps, you can think of that line as split into two steps:</p>\n<pre><code>temp = hello + '!'\nhello = temp\n</code></pre>\n<p>or:</p>\n<pre><code>temp = hello\nhello = temp + '!'\n</code></pre>\n<p>This is very useful in a loop. Think about what this program will do, then run it:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>By the way, <code>''</code> is called the <em>empty string</em> - a string containing no characters.</p>",
          "<p>The details in the above program are important. What goes wrong if you swap the last two lines and run this program instead?</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    print(line)\n    line = line + char\n</code></pre>",
          "<p>The last character in <code>name</code> only gets added to <code>line</code> at the end of the loop, after <code>print(line)</code> has already run for the last time. So that character and the full <code>name</code> never get printed at the bottom of the triangle.</p>"
        ]
      },
      {
        "slug": "BuildingUpStringsExercises",
        "title": "Building Up Strings Exercises",
        "index": 12,
        "step_texts": [
          "<p>Modify this program:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>to add a space after every character in the triangle, so the output looks like this:</p>\n<pre><code>W\nW o\nW o r\nW o r l\nW o r l d\n</code></pre>",
          "<p>Tremendous! Now modify the program so that each line is backwards, like this:</p>\n<pre><code>W\noW\nroW\nlroW\ndlroW\n</code></pre>",
          "<p>Brilliant!</p>\n<p>Code like:</p>\n<pre><code>line = line + char\n</code></pre>\n<p>is so common that Python lets you abbreviate it. This means the same thing:</p>\n<pre><code>line += char\n</code></pre>\n<p>Note that there is no abbreviation for <code>line = char + line</code>.</p>\n<p>Now use <code>+=</code> and a for loop to write your own program which prints <code>name</code> 'underlined', like this:</p>\n<pre><code>World\n-----\n</code></pre>\n<p>There should be one <code>-</code> for each character in <code>name</code>.</p>",
          "<p>Fantastic!</p>\n<p>By the way, when you don't need to use a variable, it's common convention to name that variable <code>_</code> (underscore), e.g. <code>for _ in name:</code>. This doesn't change how the program runs, but it's helpful to readers.</p>\n<p>Let's make this fancier. Extend your program to draw a box around the name, like this:</p>\n<pre><code>+-------+\n| World |\n+-------+\n</code></pre>\n<p>Note that there is a space between the name and the pipes (<code>|</code>).</p>",
          "<p>You're getting good at this! Looks like you need more of a challenge...maybe instead of putting a name in a box, the name should be the box? Write a program that outputs this:</p>\n<pre><code>+World+\nW     W\no     o\nr     r\nl     l\nd     d\n+World+\n</code></pre>",
          "<p>Sweet! You're really getting the hang of this! If you want, here's one more optional bonus challenge. Try writing a program that outputs:</p>\n<pre><code>W\n o\n  r\n   l\n    d\n</code></pre>\n<p>Or don't, it's up to you.</p>"
        ]
      },
      {
        "slug": "BasicTerminology",
        "title": "Basic Terminology",
        "index": 13,
        "step_texts": [
          "<p>Here's some words you need to know:</p>\n<p>An <strong><em>expression</em></strong> is a piece of code that has a value. For example, in this line of code:</p>\n<pre><code>sentence = 'Hello ' + name\n</code></pre>\n<p>there are three expressions:</p>\n<ol>\n<li><code>'Hello '</code></li>\n<li><code>name</code></li>\n<li><code>'Hello ' + name</code></li>\n</ol>\n<p>By contrast, the full line <code>sentence = ...</code> is a <strong><em>statement</em></strong>. It's a command that tells the computer to perform an action. It has no value of its own. This means, for example, that you can't add statements together. This code is invalid:</p>\n<pre><code>(word = 'Hello') + (name = 'Bob')\n</code></pre>\n<p>Specifically, a statement like <code>sentence = ...</code> where a variable is given a value is called <strong><em>assignment</em></strong> - the value is <em>assigned to</em> the the variable.</p>\n<p>A program is a list of statements which are executed in order. A <code>for</code> loop is a <em>compound statement</em>, meaning it has a body of its own which contains other statements. Most statements will also contain expressions, and expressions can contain other smaller expressions, but expressions cannot contain statements.</p>\n<p>The process of calculating the value of an expression is called <strong><em>evaluation</em></strong> - note how it almost contains the word 'value'. The computer <em>evaluates</em> <code>1 + 2</code> to get the value <code>3</code>.</p>\n<p>The process of executing a loop is called <strong><em>iteration</em></strong>. Code like <code>for char in 'Hello':</code> is <em>iterating over</em> the string <code>'Hello'</code>. The fact that it's possible means that strings are <em>iterable</em>. By contrast, numbers are not iterable, which is exactly what Python will tell you if you try <code>for char in 3:</code>. Each run through the loop is <em>one iteration</em>, so in this example there will be 5 iterations.</p>"
        ]
      },
      {
        "slug": "IntroducingIfStatements",
        "title": "Introducing If Statements",
        "index": 14,
        "step_texts": [
          "<p>Now we're going to learn how to tell the computer to make decisions and only run code\nunder certain conditions. For this we will need a new type of value. You've seen\nnumbers and strings, now meet <em>booleans</em>. There are only two boolean values:\n<code>True</code> and <code>False</code>. Try this program:</p>\n<pre><code>condition = True\nprint(condition)\ncondition = False\nprint(condition)\n</code></pre>",
          "<p>Booleans are meant to be used inside <em>if statements</em> (sometimes also called <em>conditionals</em>).</p>\n<p>Here is a simple example for you to run:</p>\n<pre><code>if True:\n    print('This gets printed')\n\nif False:\n    print('This does not')\n</code></pre>",
          "<p>Note how the code inside the first <code>if</code> statement ran, but not the second.</p>\n<p>In general, an <code>if</code> statement looks like this:</p>\n<pre><code>if &lt;condition&gt;:\n    &lt;body&gt;\n</code></pre>\n<p>where <code>&lt;condition&gt;</code> is any expression which evaluates to a boolean and <code>&lt;body&gt;</code> is an <strong>indented</strong> list\nof one or more statements. The structure is quite similar to a <code>for</code> loop. Note the colon (<code>:</code>) which\nis essential.</p>\n<p>When the computer sees <code>if &lt;condition&gt;:</code>, it checks if <code>&lt;condition&gt;</code> is <code>True</code>. If it is, it runs the body.\nIf not, it skips it and continues to the rest of the program.</p>\n<p>Here's a more interesting example for you to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence += '!'\nprint(sentence)\n</code></pre>",
          "<p>(Remember that <code>sentence += '!'</code> means <code>sentence = sentence + '!'</code>)</p>\n<p>Change <code>excited = True</code> to <code>excited = False</code> and run the program again to see what the difference is.</p>",
          "<p>Time for an exercise. Modify the program above to include an extra\nboolean parameter <code>confused</code>, so the program should start like this:</p>\n<pre><code>sentence = 'Hello World'\nexcited = False\nconfused = True\n</code></pre>\n<p>(<code>sentence</code> can be any string and the two booleans can be either <code>True</code> or <code>False</code>)</p>\n<p>When <code>confused</code> is true, the printed sentence should have a question mark added to the end.\nIf both <code>confused</code> and <code>excited</code> are true, the sentence should end with <code>!?</code>.</p>",
          "<p>Well done! This program can do 4 different things depending on how you combine <code>excited</code>\nand <code>confused</code>. Try them out if you want.</p>"
        ]
      },
      {
        "slug": "CombiningCompoundStatements",
        "title": "Combining Compound Statements",
        "index": 15,
        "step_texts": [
          "<p>Compound statements like <code>for</code> loops and <code>if</code> statements have bodies which are a list\nof inner statements. Those inner statements can be anything, including other compound statements.\nTry this example of a <code>for</code> loop inside an <code>if</code> statement for when you want to show\nthat you're <em>really</em> excited:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    new_sentence = ''\n    for char in sentence:\n        new_sentence += char\n        new_sentence += '!'\n    sentence = new_sentence\n\nprint(sentence)\n</code></pre>",
          "<p>Note how the body of the <code>if</code> statement (5 lines) is indented as usual, while the body\nof the <code>for</code> loop (2 lines) is indented by an additional 4 spaces in each line to show that\nthose lines are within the <code>for</code> loop. You can see the overall structure of the program\njust by looking at the indentation.</p>\n<p>Alternatively, you can put an <code>if</code> inside a <code>for</code>:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nnew_sentence = ''\nfor char in sentence:\n    new_sentence += char\n    if excited:\n        new_sentence += '!'\n\nsentence = new_sentence\nprint(sentence)\n</code></pre>\n<p>These two programs have the exact same result. However the first one is more efficient as it\nonly iterates over the string if it needs to, since when <code>excited = False</code> nothing changes.</p>"
        ]
      },
      {
        "slug": "UnderstandingProgramsWithSnoop",
        "title": "Understanding Programs With Snoop",
        "index": 16,
        "step_texts": [
          "<p>Run this program:</p>\n<pre><code>sentence = 'Hello World'\n\ninclude = False\nnew_sentence = ''\nfor char in sentence:\n    if include:\n        new_sentence += char\n    include = True\n\nprint(new_sentence)\n</code></pre>",
          "<p>As you can see, it prints everything but the first character. Take some time to understand how this works.</p>\n<p>In fact, it's time to introduce a new tool to help you understand programs. Click the 'Snoop' button to run the same program while also showing what's happening.</p>",
          "<p>Tada! Scroll to the top of the terminal and let's walk through what snoop is showing you.\nIt starts out very straightforward:</p>\n<pre><code>    1 | sentence = 'Hello World'\n    3 | include = False\n    4 | new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The first lines are simply showing you the lines of the program that the computer ran.\nOn the left is the line number as seen in the editor.</p>\n<p>Running <code>for char in sentence:</code> assigns a value to the variable <code>char</code>, so snoop shows you that value.\nLines starting with <code>......</code> indicate a new variable or a change in the value of an existing variable.\nSuch lines will not be shown when they're redundant, which is why the snoop output doesn't start like this:</p>\n<pre><code>    1 | sentence = 'Hello World'\n ...... sentence = 'Hello World'\n    3 | include = False\n ...... include = False\n    4 | new_sentence = ''\n ...... new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The next two lines are:</p>\n<pre><code>    6 |     if include:\n    8 |     include = True\n</code></pre>\n<p>What's important here is what's not showing: because <code>include</code> is <code>False</code>, line 7 (<code>new_sentence += char</code>) gets skipped. But then <code>include</code> is set to <code>True</code>, so the next iteration of the loop is different:</p>\n<pre><code>    5 | for char in sentence:\n ...... char = 'e'\n    6 |     if include:\n    7 |         new_sentence += char\n .............. new_sentence = 'e'\n</code></pre>\n<p><code>new_sentence += char</code> runs for the first time and the variable <code>new_sentence</code> gets a new value.</p>\n<p>Now modify the program to do the opposite: only print the first character, leave out the rest.</p>",
          "<p>Great job! You're working with increasingly complex programs.</p>"
        ]
      },
      {
        "slug": "IfAndElse",
        "title": "<code>if</code> and <code>else</code>",
        "index": 17,
        "step_texts": [
          "<p>An <code>if</code> statement can optionally have an <code>else</code> part. Run this example:</p>\n<pre><code>condition = True\nif condition:\n    print('Yes')\nelse:\n    print('No')\n</code></pre>",
          "<p>Now change the first line to <code>condition = False</code> and run it again.</p>",
          "<p>Think of <code>else</code> as saying 'or else' or 'otherwise'. It means that if the condition in the <code>if</code>\nis false, then the body of the <code>else</code> will run instead. Whether the condition is true or false,\nexactly one of the two bodies will run.</p>\n<p>Here's a more interesting example to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence = sentence.upper()\nelse:\n    sentence = sentence.lower()\nprint(sentence)\n</code></pre>",
          "<p><code>sentence.upper()</code> is a new kind of expression we haven't encountered yet. What's going on here is that <code>sentence</code> is a string and strings have various <em>methods</em> that let you conveniently calculate new values from them, including <code>upper</code> and <code>lower</code>. The names refer to uppercase (capital letters) and lowercase (small letters). <code>'Hello World'.upper()</code> evaluates to <code>'HELLO WORLD'</code>. It doesn't change the contents of <code>sentence</code> though, so you have to assign the new value again with <code>sentence = sentence.upper()</code>.</p>\n<p>Now change <code>excited</code> to <code>False</code> and run it again.</p>",
          "<p>Here's a broken program:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    char = '!'\nsentence += char\n\nprint(sentence)\n</code></pre>\n<p>Can you see the problem? If you run it, everything seems fine. What could go wrong?</p>\n<p>Spoilers below! Have you figured it out?</p>\n<p>What happens if you change <code>excited</code> to <code>False</code>?</p>",
          "<p>If <code>excited</code> is true then <code>char</code> is defined and everything runs fine. But otherwise\n<code>char</code> never gets assigned a value, so trying to use it in <code>sentence += char</code> fails.</p>\n<p>Fix this by adding an <code>else</code> clause to the <code>if</code> so that if <code>excited</code> is false, a full stop (<code>.</code>)\nis added to the end of the sentence instead of an exclamation mark (<code>!</code>).</p>",
          "<p>Time for a challenge!</p>\n<p>Write a program which, given a string <code>sentence</code>, prints a modified version with\nthe same letters, where the first letter is capitalised and the rest are lowercase.\nFor example, the output should be <code>Hello world</code> whether the input <code>sentence = 'hello world'</code>\nor <code>'HELLO WORLD'</code>.</p>",
          "<p>Excellent!!!</p>\n<p>One more exercise, and then you can relax. </p>\n<p>Write a program which prints <code>sentence</code> mockingly, e.g:</p>\n<pre><code>OnE MoRe eXeRcIsE, aNd tHeN YoU CaN ReLaX.\n</code></pre>\n<p>Every second character should be lowercased, the rest should be uppercase.</p>",
          "<p>Perfect! Take a moment to be proud of what you've achieved. Can you feel your brain growing?</p>"
        ]
      },
      {
        "slug": "TheEqualityOperator",
        "title": "The Equality Operator",
        "index": 18,
        "step_texts": [
          "<p>There are several ways to obtain booleans without assigning them directly,\nwhich allows you to construct very useful <code>if</code> statements. In particular there\nare many <em>comparison operators</em> which compare the values of two expressions.\nThe most common is the equality operator which checks if two values are equal.\nIt's denoted by two equals signs: <code>==</code>. Try running this:</p>\n<pre><code>print(1 + 2 == 3)\nprint(4 + 5 == 6)\nprint('ab' + 'c' == 'a' + 'bc')\n</code></pre>",
          "<p>As you can see, if the values are equal, the equality expression evaluates to <code>True</code>,\notherwise it's <code>False</code>.</p>\n<p>Note the difference between the equality operator <code>==</code> and a single <code>=</code> which has different meanings,\nparticularly in assignment statements as you've seen them so far. What happens if you try\nremoving a single <code>=</code> from the previous program?</p>",
          "<p>Let's use <code>==</code> in an <code>if</code> statement. In this program, the <code>if</code> body runs only when <code>c</code> is the character <code>'s'</code>. See for yourself.</p>\n<pre><code>name = 'kesha'\nnew_name = ''\nfor c in name:\n    if c == 's':\n        c = '$'\n    new_name += c\n\nprint(new_name)\n</code></pre>",
          "<p>Now extend the program to also replace <code>e</code> with <code>3</code> and <code>a</code> with <code>@</code>.</p>",
          "<p>Well done!</p>"
        ]
      },
      {
        "slug": "IntroducingElif",
        "title": "Introducing <code>elif</code>",
        "index": 19,
        "step_texts": [
          "<p>Quick biology lesson! Most of the cells in your body contain your full genetic code in DNA.\nThis consists of strands of molecular units called nucleobases which come in four varieties:\nAdenine, Cytosine, Guanine, and Thymine, or ACGT for short.\nSo part of a single strand might be something like:</p>\n<pre><code>AGTAGCGTCCTTAGTTACAGGATGGCTTAT...\n</code></pre>\n<p>This will be paired with another strand where A is replaced by T and vice versa,\nand C is replaced by G and vice versa, e.g:</p>\n<pre><code>TCATCGCAGGAATCAATGTCCTACCGAATA...\n</code></pre>\n<p>The two strands are 'zipped' together into the famous double helix structure,\njoined by the matching A-T and C-G pairs. These pairings are essential in copying DNA when\ncells divide and reproduce. The double helix is unzipped and the code is transcribed\ninto its opposite version to make the copy.</p>\n<p>We're going to repeat that process. Let's try the same kind of program we just wrote:</p>\n<pre><code>dna = 'AGTAGCGTC'\nopposite_dna = ''\nfor char in dna:\n    if char == 'A':\n        char = 'T'\n    if char == 'T':\n        char = 'A'\n    if char == 'G':\n        char = 'C'\n    if char == 'C':\n        char = 'G'\n    opposite_dna += char\n\nprint(opposite_dna)\n</code></pre>",
          "<p>Oh dear, that doesn't quite work. <code>T</code> is changed to <code>A</code> but <code>A</code> isn't changed to anything.\nCan you see why?</p>\n<p>When <code>char == 'A'</code>, then the body <code>char = 'T'</code> does indeed run. But that means that the following\ncondition <code>char == 'T'</code> also passes and so <code>char = 'A'</code> and we're back where we started.\nWe need to only change <code>char</code> from <code>T</code> to <code>A</code> if <code>char</code> wasn't already <code>A</code> to begin with,\nmeaning <code>char == 'A'</code> was <code>False</code>. We can do that with an <code>else</code>, like so:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelse:\n    if char == 'T':\n        char = 'A'\n</code></pre>\n<p>Now fix the program to replace all characters correctly.</p>",
          "<p>Brilliant! You have mimicked what your own cells are constantly doing.</p>\n<p>An <code>if</code> inside an <code>else</code> can be replaced by a single keyword <code>elif</code>. For example,\nthe previous code can be changed to this:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelif char == 'T':\n    char = 'A'\nelif char == 'G':\n    char = 'C'\nelif char == 'C':\n    char = 'G'\n</code></pre>",
          "<p>It's common to have a chain of <code>elif</code> clauses when you want exactly one of many\nbodies to run, like in this case. In general, code like this:</p>\n<pre><code>if X:\n    ...\nelse:\n    if Y:\n        ...\n    else:\n        if Z:\n            ...\n        else:\n            ...\n</code></pre>\n<p>can be rewritten as:</p>\n<pre><code>if X:\n    ...\nelif Y:\n    ...\nelif Z:\n    ...\nelse:\n    ...\n</code></pre>\n<p>which is both shorter and saves you from unpleasant nested indentation.\nThe difference is only cosmetic: once the computer runs this code, it can't\ntell the difference between the two versions.</p>\n<p>Note that <code>elif</code>(s) can optionally be followed by one final <code>else</code>. We didn't include one\nin our DNA example, but we could add one to alert us to any unexpected characters\nin the input, or change <code>elif char == 'C':</code> to <code>else:</code> if we were confident\nabout the input being valid.</p>"
        ]
      },
      {
        "slug": "OtherComparisonOperators",
        "title": "Other Comparison Operators",
        "index": 20,
        "step_texts": [
          "<p>The opposite of the equals operator <code>==</code> is the <em>not equals</em> operator <code>!=</code>. If you squint it sort of looks like \u2260. It evaluates to <code>True</code> when two values are...not equal. Try it for yourself in the shell.</p>",
          "<p>Here's a cute little program using <code>!=</code>:</p>\n<pre><code>sentence = \"The e key on my keyboard is broken\"\nnew_sentence = ''\nfor c in sentence:\n    if c != 'e':\n        new_sentence += c\nprint(new_sentence)\n</code></pre>",
          "<p>Other handy operators are <code>&lt;</code> (less than) and <code>&gt;</code> (greater than). For example, <code>a &lt; b</code> means \"<code>a</code> is less than <code>b</code>\". Try using one of these in the shell to compare two numbers.</p>",
          "<p>You can also use these operators to compare strings. If you arrange two strings in alphabetical order, the first one is 'less than' the second. See for yourself.</p>",
          "<p>Here's a practical example of <code>&lt;</code> in action for you to try:</p>\n<pre><code>percentage = 73\n\nif percentage &lt; 20:\n    grade = \"F\"\nelif percentage &lt; 40:\n    grade = \"D\"\nelif percentage &lt; 60:\n    grade = \"C\"\nelif percentage &lt; 80:\n    grade = \"B\"\nelse:\n    grade = \"A\"\n\nprint(grade)\n</code></pre>\n<p>Recall that <code>elif percentage &lt; 40</code> after <code>if percentage &lt; 20</code> means \"if the percentage wasn't less than 20 and also is less than 40\", so it will pass for all numbers from 20 to 39 inclusive. Similarly a 'C' is for percentages from 40 to 59, and an 'A' is for any number 80 and up.</p>",
          "<p>Now for an exercise: write a program that takes three variables <code>x1</code>, <code>x2</code>, and <code>x3</code>, and prints the value of the smallest one. So for:</p>\n<pre><code>x1 = 'Charlie'\nx2 = 'Alice'\nx3 = 'Bob'\n</code></pre>\n<p>it should print <code>Alice</code>.</p>",
          "<p>Marvelous!</p>\n<p>There are many ways this could be solved. Here's one solution:</p>\n<pre><code>if x1 &lt; x2:\n    if x1 &lt; x3:\n        first = x1\n    else:\n        first = x3\nelse:\n    if x2 &lt; x3:\n        first = x2\n    else:\n        first = x3\n\nprint(first)\n</code></pre>\n<p>Here's another:</p>\n<pre><code>first = x1\n\nif x2 &lt; first:\n    first = x2\n\nif x3 &lt; first:\n    first = x3\n\nprint(first)\n</code></pre>\n<p>These programs (and yours too) all work equally well with numbers and strings,\nbut not a mixture.</p>\n<p><code>&lt;</code> and <code>&gt;</code> evaluate to False if the compared values are equal. For example,\n3 is not less than 3, so <code>3 &lt; 3</code> and <code>3 &gt; 3</code> are both False.\nTo allow equal values, use <code>&lt;=</code> and <code>&gt;=</code>.\nAgain, if you squint, they look a bit like \u2264 and \u2265.\nNote that the <code>=</code> comes second - there are no such operators as <code>=&lt;</code> or <code>=&gt;</code>.\nTo remember this, read them out loud as \"less than or equal to\"\nand \"greater than or equal to\".</p>\n<p>In summary, the main comparison operators are <code>==</code>, <code>!=</code>, <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>, and <code>&gt;=</code>.\nIf you ever have doubts about what they do, play with them in the shell!</p>"
        ]
      },
      {
        "slug": "IntroducingLists",
        "title": "Introducing Lists",
        "index": 21,
        "step_texts": [
          "<p>It's time to learn about a powerful new type of value called lists. Here's an example:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor word in words:\n    print(word)\n</code></pre>",
          "<p>A list is a <em>sequence</em> (an ordered collection/container) of any number of values.\nThe values are often referred to as <em>elements</em>.\nThey can be anything: numbers, strings, booleans, even lists! They can also be a mixture of types.</p>\n<p>To create a list directly, like above:</p>\n<ol>\n<li>Write some square brackets: <code>[]</code></li>\n<li>If you don't want an empty list, write some expressions inside to be the elements.</li>\n<li>Put commas (<code>,</code>) between elements to separate them.</li>\n</ol>\n<p>Here's another example of making a list:</p>\n<pre><code>x = 1\nthings = ['Hello', x, x + 3]\nprint(things)\n</code></pre>",
          "<p>As you saw above, lists are <em>iterable</em>, meaning you can iterate over them with a <code>for loop</code>.\nHere's a program that adds up all the numbers in a list:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9]\n\ntotal = 0\nfor number in numbers:\n    total += number\n\nprint(total)\n</code></pre>",
          "<p>Now modify the program so that it can add up a list of strings instead of numbers.\nFor example, given:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n</code></pre>\n<p>it should print:</p>\n<pre><code>Thisisalist\n</code></pre>",
          "<p>Optional bonus challenge: extend the program to insert a separator string <em>between</em> each word.\nFor example, given</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\nseparator = ' - '\n</code></pre>\n<p>it would output:</p>\n<pre><code>This - is - a - list\n</code></pre>\n<p>Lists and strings have a lot in common.\nFor example, you can add two lists to combine them together into a new list.\nYou can also create an empty list that has no elements.\nCheck for yourself:</p>\n<pre><code>numbers = [1, 2] + [3, 4]\nprint(numbers)\nnew_numbers = []\nnew_numbers += numbers\nnew_numbers += [5]\nprint(new_numbers)\n</code></pre>\n<p>With that knowledge, write a program which takes a list of numbers\nand prints a list where each number has been doubled. For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[6, 2, 8, 2, 10, 18, 4, 12, 10]\n</code></pre>",
          "<p>Great!</p>\n<p>When you want to add a single element to the end of a list, instead of:</p>\n<pre><code>some_list += [element]\n</code></pre>\n<p>it's actually more common to write:</p>\n<pre><code>some_list.append(element)\n</code></pre>\n<p>There isn't really a big difference between these, but <code>.append</code>\nwill be more familiar and readable to most people.</p>\n<p>Now use <code>.append</code> to write a program which prints a list containing only the numbers bigger than 5.</p>\n<p>For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[9, 6]\n</code></pre>",
          "<p>Fantastic! We're making great progress.</p>"
        ]
      },
      {
        "slug": "UsingBreak",
        "title": "Using <code>break</code> to end a loop early",
        "index": 22,
        "step_texts": [
          "<p>Exercise: write a program which takes a list and a value and checks\nif the list contains the value. For example, given:</p>\n<pre><code>things = ['This', 'is', 'a', 'list']\nthing_to_find = 'is'\n</code></pre>\n<p>it should print <code>True</code>, but for</p>\n<pre><code>thing_to_find = 'other'\n</code></pre>\n<p>it should print <code>False</code>.</p>",
          "<p>Nice!</p>\n<p>A typical solution looks something like this:</p>\n<pre><code>found = False\nfor thing in things:\n    if thing == thing_to_find:\n        found = True\n\nprint(found)\n</code></pre>\n<p>Your solution is probably similar. It's fine, but it's a bit inefficient.\nThat's because it'll loop over the entire list even if it finds the element at the beginning.\nYou can stop any loop using a <code>break</code> statement, like so:</p>\n<pre><code>for thing in things:\n    if thing == thing_to_find:\n        found = True\n        break\n</code></pre>\n<p>This is just as correct but skips unnecessary iterations and checks once it finds the element.\nYou can use snoop to see the difference.</p>"
        ]
      },
      {
        "slug": "GettingElementsAtPosition",
        "title": "Getting Elements at a Position",
        "index": 23,
        "step_texts": [
          "<p>Looping is great, but often you just want to retrieve a single element from the list at a known position.\nHere's how:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nprint(words[0])\nprint(words[1])\nprint(words[2])\nprint(words[3])\n</code></pre>",
          "<p>In general, you can get the element at the position <code>i</code> with <code>words[i]</code>. The operation is called <em>subscripting</em> or <em>indexing</em>, and the position is called the <em>index</em>.</p>\n<p>You've probably noticed that the first index is 0, not 1. In programming, counting starts at 0. It seems weird, but that's how most programming languages do it, and it's generally agreed to be better.</p>\n<p>This also means that the last index in this list of 4 elements is 3. What happens if you try getting an index greater than that?</p>",
          "<p>There you go. <code>words[4]</code> and beyond don't exist, so trying that will give you an error.</p>\n<p>By the way, you can get the number of elements in a list (commonly called the <em>length</em>) using <code>len(words)</code>.\nThat means that the last valid index of the list is <code>len(words) - 1</code>, so the last element is <code>words[len(words) - 1]</code>. Try these for yourself.</p>\n<p>So in general, the valid indices are:</p>\n<pre><code>[0, 1, 2, ..., len(words) - 2, len(words) - 1]\n</code></pre>\n<p>There's a handy built in function to give you these values, called <code>range</code>:</p>\n<pre><code>for i in range(10):\n    print(i)\n</code></pre>",
          "<p><code>range(n)</code> is similar to the list <code>[0, 1, 2, ..., n - 2, n - 1]</code>.\nThis gives us an alternative way to loop over a list:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor index in range(len(words)):\n    print(index)\n    print(words[index])\n</code></pre>",
          "<p>Let's get some exercise! Given a list <code>things</code> and a value <code>to_find</code>,\nprint the first index of <code>to_find</code> in the list, i.e. the lowest number <code>i</code> such that\n<code>things[i]</code> is <code>to_find</code>. For example, for</p>\n<pre><code>things = ['on', 'the', 'way', 'to', 'the', 'store']\nto_find = 'the'\n</code></pre>\n<p>your program should print <code>1</code>.</p>\n<p>You can assume that <code>to_find</code> appears at least once.</p>",
          "<p>Nice!</p>\n<p>By the way, indexing and <code>len()</code> also work on strings. Try them out in the shell.</p>\n<p>Here's another exercise. Given two strings of equal length, e.g:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"World\"\n</code></pre>\n<p>print them vertically side by side, with a space between each character:</p>\n<pre><code>H W\ne o\nl r\nl l\no d\n</code></pre>",
          "<p>Incredible!</p>\n<p>Your solution probably looks something like this:</p>\n<pre><code>for i in range(len(string1)):\n    char1 = string1[i]\n    char2 = string2[i]\n    print(char1 + ' ' + char2)\n</code></pre>\n<p>This doesn't work so well if the strings have different lengths.\nIn fact, it goes wrong in different ways depending on whether <code>string1</code> or <code>string2</code> is longer.\nYour next challenge is to fix this problem by filling in 'missing' characters with spaces.</p>\n<p>For example, for:</p>\n<pre><code>string1 = \"Goodbye\"\nstring2 = \"World\"\n</code></pre>\n<p>output:</p>\n<pre><code>G W\no o\no r\nd l\nb d\ny  \ne\n</code></pre>\n<p>and for:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"Elizabeth\"\n</code></pre>\n<p>output:</p>\n<pre><code>H E\ne l\nl i\nl z\no a\n  b\n  e\n  t\n  h\n</code></pre>",
          "<p>Magnificent! Take a break, you've earned it!</p>"
        ]
      },
      {
        "slug": "CallingFunctionsTerminology",
        "title": "Terminology: Calling functions and methods",
        "index": 24,
        "step_texts": [
          "<p>It's time to expand your vocabulary some more.</p>\n<p><code>print</code> and <code>len</code> are <strong><em>functions</em></strong>. See for yourself:</p>\n<pre><code>print(len)\nprint(print)\n</code></pre>",
          "<p>An expression like <code>len(things)</code> or <code>print(things)</code> is a function <strong><em>call</em></strong> - when you write that, you are <strong><em>calling</em></strong> the function <code>len</code> or <code>print</code>. The fact that this is possible means that functions are <strong><em>callable</em></strong>:</p>\n<pre><code>print(callable(len))\n</code></pre>",
          "<p>Most things are not callable, so trying to call them will give you an error:</p>\n<pre><code>f = 'a string'\nprint(callable(f))\nf()\n</code></pre>",
          "<p>In the call <code>len(things)</code>, <code>things</code> is an <strong><em>argument</em></strong>. Sometimes you will also see the word <strong><em>parameter</em></strong>, which means basically the same thing as argument. It's a bit like you're giving the argument to the function - specifically we say that the argument <code>things</code> is <em>passed</em> to <code>len</code>, and <code>len</code> <em>accepts</em> or <em>receives</em> the argument.</p>\n<p><code>len(things)</code> will evaluate to a number such as 3, in which case we say that <code>len</code> <strong><em>returned</em></strong> 3.</p>\n<p>All calls have to return something...even if it's nothing. For example, <code>print</code>'s job is to display something on screen, not to return a useful value. So it returns something useless instead:</p>\n<pre><code>things = [1, 2, 3]\nlength = len(things)\nprinted = print(length)\nprint(printed)\n</code></pre>",
          "<p><code>None</code> is a special 'null' value which can't do anything interesting. It's a common placeholder that represents the lack of a real useful value. Functions that don't want to return anything return <code>None</code> by default. If you see an error message about <code>None</code> or <code>NoneType</code>, it often means you assigned the wrong thing to a variable:</p>\n<pre><code>things = print([1, 2, 3])\nlength = len(things)\n</code></pre>",
          "<p>A <strong><em>method</em></strong> is a function which belongs to a type, and can be called on all values of that type using <code>.</code>. For example, <code>upper</code> and <code>lower</code> are methods of strings, which are called with e.g. <code>word.upper()</code>:</p>\n<pre><code>word = 'Hello'\nprint(word.upper)\nprint(word.upper())\n</code></pre>",
          "<p>Another example is that <code>append</code> is a method of lists. But you can't use <code>.upper</code> on a list or <code>.append</code> on a string:</p>\n<pre><code>word = 'Hello'\nword.append('!')\n</code></pre>",
          "<p>The word 'attribute' in the error message refers to the use of <code>.</code> - the error actually comes just from <code>word.append</code>, without even a call.</p>"
        ]
      },
      {
        "slug": "FunctionsAndMethodsForLists",
        "title": "Functions And Methods For Lists",
        "index": 25,
        "step_texts": [
          "<p>Let's review how to work with lists. Suppose we have a list <code>nums = [1, 2, 3]</code>. You can use:</p>\n<ul>\n<li><strong><code>append</code></strong>: Add an element to the end of the list. <code>nums.append(4)</code> changes the list to <code>[1, 2, 3, 4]</code>.</li>\n<li><strong><code>len</code></strong>: Returns the number of elements. <code>len(nums)</code> is <code>3</code>.</li>\n<li><strong><code>range</code></strong>: <code>range(n)</code> is an object similar to the list of numbers from 0 to <code>n - 1</code>. In particular, <code>range(len(nums))</code> is like <code>[0, 1, 2]</code>.</li>\n<li><strong><code>subscripting</code></strong>: Get a value at an index. <code>nums[0]</code> is 1, <code>nums[1]</code> is 2, <code>nums[2]</code> is 3.</li>\n<li><strong><code>+</code></strong>: Concatenates lists. <code>nums + [4, 5]</code> is <code>[1, 2, 3, 4, 5]</code>.</li>\n</ul>\n<p>Here's some new things. Try them out in the shell.</p>\n<ul>\n<li><strong><code>subscript assignment</code></strong>: Set a value at an index. <code>nums[0] = 9</code> changes the list to <code>[9, 2, 3]</code>.</li>\n<li><strong><code>join</code></strong>: Add a list of strings with a separator in between. This is a method of strings (the separator) which takes an iterable of strings as an argument. <code>'--'.join(['apples', 'oranges', 'bananas'])</code> returns <code>'apples--oranges--bananas'</code>. You can also use an empty string if you don't want a separator, e.g. <code>''.join(['apples', 'oranges', 'bananas'])</code> returns <code>'applesorangesbananas'</code>. </li>\n<li><strong><code>sum</code></strong>: Add a list of numbers. <code>sum(nums)</code> is 6.</li>\n<li><strong><code>in</code></strong>: A comparison operator that checks if a value is in a list. <code>2 in nums</code> is <code>True</code>, but <code>4 in nums</code> is <code>False</code>.</li>\n<li><strong><code>index</code></strong>: Returns the first index of a value in a list. <code>[7, 8, 9, 8].index(8)</code> is 1. Raises an error if the value isn't there.</li>\n</ul>\n<p>You may recognise some of these from your exercises. I assure you that those exercises were not pointless, as you've now learned valuable fundamental skills. For example, you can use <code>in</code> to check if a list contains 5, but there's no similarly easy way to check for a number bigger than 5.</p>\n<p>It's useful to know these functions, but it's not easy to learn them all, and there's many more. A more important skill is being able to look things up. For example, here are some typical ways you might Google the above functions if you forgot their names:</p>\n<ul>\n<li><code>append</code><ul>\n<li>python add element to list</li>\n<li>python add item at end of list</li>\n</ul>\n</li>\n<li><code>len</code><ul>\n<li>python size of list</li>\n<li>python number of elements in list</li>\n<li>python how many characters in string</li>\n</ul>\n</li>\n<li><code>join</code><ul>\n<li>python combine list of strings with separator</li>\n<li>python add together list of strings with string in between</li>\n</ul>\n</li>\n<li><code>sum</code><ul>\n<li>python add list of numbers</li>\n<li>python total of numbers</li>\n</ul>\n</li>\n<li><code>in</code><ul>\n<li>python check if list contains value</li>\n<li>python test if list has element</li>\n</ul>\n</li>\n<li><code>index</code><ul>\n<li>python get position of element</li>\n<li>python get index of value</li>\n</ul>\n</li>\n</ul>\n<p>Let's practice this skill now. Find a function/method that returns the value in a list which is bigger than any other value. For example, given the list <code>[21, 55, 4, 91, 62, 49]</code>, it will return <code>91</code>. You should write the answer in the shell as a single small expression. For example, if you were looking for the function <code>sum</code>, you could write <code>sum([21, 55, 4, 91, 62, 49])</code>. Don't solve this manually with a loop.</p>",
          "<p>Good find! Let's do one more. Consider this program:</p>\n<pre><code>nums = [1, 2, 3, 4, 5]\nnums.append(9)\nprint(nums)\n</code></pre>\n<p>This changes <code>nums</code> so that it prints:</p>\n<pre><code>[1, 2, 3, 4, 5, 9]\n</code></pre>\n<p>But suppose you don't want the 9 to be at the end, you want it to go between the second and third elements, so the output is:</p>\n<pre><code>[1, 2, 9, 3, 4, 5]\n</code></pre>\n<p>Replace the middle line (i.e. the call to <code>append</code>) with the right function/method call to do that.</p>",
          "<p>Perfect!</p>\n<p>It can also be useful to Google things like \"python list tutorial\", e.g. if:</p>\n<ul>\n<li>Googling a specific method has failed so you want to find it manually.</li>\n<li>You're still confused about lists after this course.</li>\n<li>It's been a while since you learned about lists and you need a reminder.</li>\n<li>You're struggling to solve a problem with lists and you need to go back to basics and strengthen your foundations.</li>\n</ul>\n<p>There are also ways to find information without any googling. Try <code>dir([])</code> in the shell.</p>",
          "<p><code>dir()</code> returns a list of the argument's attributes, which are mostly methods. Many will start with <code>__</code> which you can ignore for now - scroll to the end of the list and you'll see some familiar methods.</p>\n<p>Here are a few more useful functions/methods. Suppose <code>nums = [28, 99, 10, 81, 59, 64]</code></p>\n<ul>\n<li><strong><code>sorted</code></strong>: Takes an iterable and returns a list of the elements in order. <code>sorted(nums)</code> returns <code>[10, 28, 59, 64, 81, 99]</code>.</li>\n<li><strong><code>pop</code></strong>: Removes and returns an element at a given index. <code>nums.pop(3)</code> removes <code>nums[3]</code> (<code>81</code>) from the list and returns it. Without an argument, i.e. just <code>nums.pop()</code>, it will remove and return the last element.</li>\n<li><strong><code>remove</code></strong>: Removes the first occurrence of the given element. <code>nums.remove(10)</code> will leave <code>nums</code> as <code>[28, 99, 81, 59, 64]</code>. Raises an error if the value doesn't exist. Equivalent to <code>nums.pop(nums.index(10))</code>.</li>\n<li><strong><code>count</code></strong>: Returns the number of times the argument appears in the list. <code>[1, 2, 3, 2, 7, 2, 5].count(2)</code> is 3.</li>\n</ul>\n<p>You've already seen that <code>len</code> and subscripting work with strings, a bit as if strings are lists of characters. Strings also support some of the new methods we've learned, not just for characters but for any substring. For example:</p>\n<ul>\n<li><code>'the' in 'feed the dog and the cat'</code> is <code>True</code></li>\n<li><code>'feed the dog and the cat'.count('the')</code> is 2</li>\n<li><code>'feed the dog and the cat'.index('the')</code> is 5</li>\n</ul>\n<p>Note that in most cases, methods which modify a list in place (<code>append</code>, <code>insert</code>, <code>remove</code>) merely return <code>None</code>, while the remaining functions/methods return a new useful value without changing the original argument. The only exception is the <code>pop</code> method.</p>\n<p>Modifying a value directly is called <em>mutation</em> - types of values which can be mutated are <em>mutable</em>, while those that can't are <em>immutable</em>. Strings are immutable - they don't have any methods like <code>append</code> or even subscript assignment. You simply can't change a string - you can only create new strings and use those instead. That means that this is a useless statement on its own:</p>\n<pre><code>word.upper()\n</code></pre>\n<p>The string referred to by <code>word</code> isn't modified, instead <code>word.upper()</code> returned a new string which was immediately discarded. If you want to change the value that <code>word</code> refers to, you have to assign a new value to the variable:</p>\n<pre><code>word = word.upper()\n</code></pre>\n<p>Or you can use <code>word.upper()</code> immediately in a larger expression, e.g.</p>\n<pre><code>if word.lower() == 'yes':\n</code></pre>"
        ]
      },
      {
        "slug": "UnderstandingProgramsWithPythonTutor",
        "title": "Understanding Programs With Python Tutor",
        "index": 26,
        "step_texts": [
          "<p>It's time to learn about another tool to explore programs.\nCopy the code below into the editor and then click the new \"Python Tutor\" button.\nThe button opens a new tab with a visualisation from <a href=\"http://pythontutor.com\">pythontutor.com</a>.\nThere you can navigate through the program step by step with the \"Prev\" or \"Next\" buttons, or drag\nthe slider left or right. You can also see the values of variables on the right.</p>\n<pre><code>all_numbers = [2, 4, 8, 1, 9, 7]\n\nsmall_numbers = []\nbig_numbers = []\n\nfor number in all_numbers:\n    if number &lt;= 5:\n        small_numbers.append(number)\n    else:\n        big_numbers.append(number)\n\nprint(small_numbers)\nprint(big_numbers)\n</code></pre>",
          "<p>Note that the code runs twice separately: once here, once on pythontutor.com.\nDepending on your program, the two runs may produce different results.</p>"
        ]
      },
      {
        "slug": "EqualsVsIs",
        "title": "<code>==</code> vs <code>is</code>",
        "index": 27,
        "step_texts": [
          "<p>It's time to learn some technical details that are often misunderstood and lead to errors.\nRun this program:</p>\n<pre><code>list1 = [1, 2, 3]\nlist2 = [1, 2, 3]\n\nprint(list1)\nprint(list2)\nprint(list1 == list2)\n\nprint(list1 is list2)\n\nlist1.append(4)\n\nprint(list1)\nprint(list2)\n</code></pre>",
          "<p>This program is quite straightforward and mostly consists of things you're familiar with.\nWe create two variables which refer to lists.\nThe lists have the same elements, so they are equal: <code>list1 == list2</code> is <code>True</code>.</p>\n<p>But then there's a new comparison operator: <code>is</code>. Here <code>list1 is list2</code> is <code>False</code>.\nThat means that regardless of the two lists being equal,\nthey are still two separate, distinct, individual lists.\nAs a result, when you append 4 to <code>list1</code>, only <code>list1</code> changes.</p>\n<p>Now change <code>list2 = [1, 2, 3]</code> to <code>list2 = list1</code> and see what difference it makes.</p>",
          "<p>Now <code>list1 is list2</code> is <code>True</code>, because <em>there is only one list</em>, and the two variables\n<code>list1</code> and <code>list2</code> both refer to that same list. <code>list1.append(4)</code> appends to the one list\nand the result can be seen in both <code>print(list1)</code> and <code>print(list2)</code> because both lines\nare now just different ways of printing the same list.</p>\n<p>I recommend running both versions with Python Tutor to see how it visualises the difference.\nIn the second case, the two variables both have arrows pointing to a single list object.</p>\n<p><code>list2 = list1</code> doesn't create an eternal link between the variables. If you assign a new value\nto <em>either</em> of the variables, e.g. <code>list1 = [7, 8, 9]</code>, the other variable will be unaffected\nand will still point to the original list.</p>\n<p>Basically, an assignment like:</p>\n<pre><code>list2 = &lt;expression&gt;\n</code></pre>\n<p>means 'make the variable <code>list2</code> refer to whatever <code>&lt;expression&gt;</code> evaluates to'.\nIt doesn't make a copy of that value, which is how both variables can end up pointing to the same list.\nBut as we've learned before, <code>list2</code> doesn't remember <code>&lt;expression&gt;</code>, only the value.\nIt doesn't know about other variables.</p>\n<p>You can copy a list with the <code>copy</code> method:</p>\n<pre><code>list2 = list1.copy()\n</code></pre>\n<p>This will make the program behave like the first version again.</p>\n<p>If you come across this kind of problem and you're still having trouble understanding this stuff, read the essay <a href=\"https://nedbatchelder.com/text/names.html\">Facts and myths about Python names and values</a>.</p>"
        ]
      },
      {
        "slug": "ModifyingWhileIterating",
        "title": "Modifying While Iterating",
        "index": 28,
        "step_texts": [
          "<p>Consider this program. It loops through a numbers and removes the ones smaller than 10. Or at least, it tries to. I recommend running it with Python Tutor.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor i in range(len(numbers)):\n    number = numbers[i]\n    if number &lt;= 10:\n        numbers.pop(i)\nprint(numbers)\n</code></pre>\n<p>(remember that <code>numbers.pop(i)</code> removes the element from <code>numbers</code> at index <code>i</code>)</p>\n<p>As it runs, it clearly skips even looking at 7 or 3 and doesn't remove them, and at the end it fails when it tries to access an index that's too high. Can you see why this happens?</p>\n<p>The index variable <code>i</code> runs through the usual values 0, 1, 2, ... as it's supposed to, but as the list changes those are no longer the positions we want. For example in the first iteration <code>i</code> is 0 and <code>number</code> is 10, which gets removed. This shifts the rest of the numbers left one position, so now 7 is in position 0. But then in the next iteration <code>i</code> is 1, and <code>numbers[i]</code> is 8. 7 got skipped. </p>\n<p>We could try writing the program to use <code>remove</code> instead of <code>pop</code> so we don't have to use indices. It even looks nicer this way.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor number in numbers:\n    if number &lt;= 10:\n        numbers.remove(number)\nprint(numbers)\n</code></pre>\n<p>But it turns out this does the same thing, for the same reason. Iterating over a list still goes through the indices under the hood.</p>\n<p>The lesson here is to <strong><em>never modify something while you iterate over it</em></strong>. Keep mutation and looping separate.</p>\n<p>The good news is that there are many ways to solve this. You can instead just loop over a copy, as in:</p>\n<pre><code>for number in numbers.copy():\n</code></pre>\n<p>Now the list being modified and the list being itererated over are separate objects, even if they start out with equal contents.</p>\n<p>Similarly, you could loop over the original and modify a copy:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = numbers.copy()\n\nfor number in numbers:\n    if number &lt;= 10:\n        big_numbers.remove(number)\nprint(big_numbers)\n</code></pre>\n<p>Or you could build up a new list from scratch. In this case, we've already done a similar thing in an exercise:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = []\n\nfor number in numbers:\n    if number &gt; 10:\n        big_numbers.append(number)\nprint(big_numbers)\n</code></pre>"
        ]
      },
      {
        "slug": "IntroducingNestedLoops",
        "title": "Introducing Nested Loops",
        "index": 29,
        "step_texts": [
          "<p>You've seen that the indented body of an <code>if</code> or a loop can contain any kind of statement, including more <code>if</code> statements and loops. In particular a loop can contain another loop. Here's an example:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(number)\n</code></pre>",
          "<p>This is called a <em>nested loop</em>. Nothing about it is really new, it's just worth understanding properly because it can be very useful for writing interesting programs.</p>\n<p>Let's add a line to separate sections of the output:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(number)\n    print('---')\n</code></pre>",
          "<p>Make sure you fully grasp what's going on. <code>print(letter)</code> and <code>print('---')</code> each run 3 times, because their indentation puts them in the <em>outer loop</em>. <code>print(number)</code> is called 3 \u00d7 4 = 12 times, because it's in the <em>inner loop</em> <code>for number in range(4):</code> which has 4 iterations but is itself in the outer loop so it runs 3 times.</p>\n<p>One more tweak:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(letter, number)\n    print('---')\n</code></pre>",
          "<p><code>print(letter, number)</code> gives <code>print</code> two arguments. <code>print</code> can take any number of arguments, and it will output them all on the same line, with spaces in between. If you try using <code>print(letter + ' ' + number)</code> instead you'll get an error, because you can't add strings and numbers. We'll come back to that later.</p>\n<p>Let's put this to use! Suppose you're a teacher and you need to print out all the multiplication tables from 1 to 12 for your students. You don't want to write them manually, but you can write a program to do it for you! Your program output should look like this including the lines of dashes:</p>\n<pre><code>1 x 1 = 1\n1 x 2 = 2\n1 x 3 = 3\n1 x 4 = 4\n1 x 5 = 5\n1 x 6 = 6\n1 x 7 = 7\n1 x 8 = 8\n1 x 9 = 9\n1 x 10 = 10\n1 x 11 = 11\n1 x 12 = 12\n----------\n2 x 1 = 2\n2 x 2 = 4\n2 x 3 = 6\n2 x 4 = 8\n2 x 5 = 10\n2 x 6 = 12\n2 x 7 = 14\n2 x 8 = 16\n2 x 9 = 18\n2 x 10 = 20\n2 x 11 = 22\n2 x 12 = 24\n----------\n3 x 1 = 3\n3 x 2 = 6\n3 x 3 = 9\n(you get the idea...)\n11 x 10 = 110\n11 x 11 = 121\n11 x 12 = 132\n----------\n12 x 1 = 12\n12 x 2 = 24\n12 x 3 = 36\n12 x 4 = 48\n12 x 5 = 60\n12 x 6 = 72\n12 x 7 = 84\n12 x 8 = 96\n12 x 9 = 108\n12 x 10 = 120\n12 x 11 = 132\n12 x 12 = 144\n----------\n</code></pre>",
          "<p>Perfect!</p>\n<p>Next exercise: you're organising a tournament for a game, such as chess or tennis. You have a list of player names:</p>\n<pre><code>players = [\"Alice\", \"Bob\", \"Charlie\"]\n</code></pre>\n<p>Every player is going to play against every other player twice: once where they get the advantage (e.g. by moving or serving first) and once not. Print out all the match combinations like this:</p>\n<pre><code>Alice vs Bob\nAlice vs Charlie\nBob vs Alice\nBob vs Charlie\nCharlie vs Alice\nCharlie vs Bob\n</code></pre>\n<p>Note that \"Alice vs Bob\" and \"Bob vs Alice\" are both in the list, but there's no \"Alice vs Alice\" - we don't want anyone playing with themselves.</p>",
          "<p>Well done! If you'd like a bonus challenge, remove the repetition and only output each pair of players once, e.g:</p>\n<pre><code>Alice vs Bob\nAlice vs Charlie\nBob vs Charlie\n</code></pre>\n<p>For your next exercise, you need to crack a password. You know that it's exactly four letters long and that only a few letters are possible, which you've written down:</p>\n<pre><code>letters = \"ABCD\"\n</code></pre>\n<p>You need to print out all possible passwords:</p>\n<pre><code>AAAA\nAAAB\nAAAC\nAAAD\nAABA\nAABB\n...skipping a few...\nDDDA\nDDDB\nDDDC\nDDDD\n</code></pre>",
          "<p>Wow, you're basically a hacker now!</p>\n<p>One more exercise. Given a size:</p>\n<pre><code>size = 5\n</code></pre>\n<p>Print out an 'upside down' triangle made of the letter <code>O</code> whose sides are as long as the given size, e.g:</p>\n<pre><code>OOOOO\nOOOO\nOOO\nOO\nO\n</code></pre>",
          "<p>Wow, you're an artist too!</p>"
        ]
      }
    ],
    "user": {
      "email": "[email protected]",
      "developerMode": true
    },
    "processing": false,
    "numHints": 0,
    "editorContent": "",
    "messages": [],
    "pastMessages": [],
    "requestingSolution": false,
    "solution": {
      "tokens": [],
      "maskedIndices": [],
      "mask": []
    }
  }
}

{
  "rpc": {
    "loading": [],
    "error": null
  },
  "book": {
    "server": {
      "hints": [],
      "step_index": 0,
      "pages_progress": [
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "page_index": 0,
      "showEditor": false,
      "showSnoop": false,
      "showPythonTutor": false,
      "showBirdseye": true
    },
    "pages": [
      {
        "slug": "IntroducingTheShell",
        "title": "Introducing The Shell",
        "index": 0,
        "step_texts": [
          "<p>At the bottom right of the screen is the <em>shell</em>. This is a place for running small bits of Python code. Just type in some code, press enter, and it'll run! Try it now:</p>\n<ol>\n<li>Click anywhere on the shell (the black area).</li>\n<li>Type <code>1+2</code></li>\n<li>Press the Enter key on your keyboard.</li>\n</ol>",
          "<p>Great! Python evaluated <code>1+2</code> and got the result <code>3</code>, so the shell displays that.</p>\n<p>The shell is probably your most important tool for learning Python, and you should spend lots of time experimenting and exploring in it. Be curious! Constantly ask yourself \"What would happen if I ran X?\" and then immediately answer that question by running it! Never be scared to try something out - if you get something wrong, nothing bad will happen.</p>\n<p>Try doing some more calculations now. You can multiply numbers with <code>*</code>, divide with <code>/</code>, and subtract with <code>-</code>. You can also use parentheses, i.e. <code>(</code> and <code>)</code>.</p>",
          "<p>Excellent! Keep experimenting. When you're ready, click 'Next' to continue.</p>"
        ]
      },
      {
        "slug": "NavigatingShellHistory",
        "title": "Navigating Shell History",
        "index": 1,
        "step_texts": [
          "<p>Here's a tip: often you will want to re-run a previously entered bit of code, or a slightly modified version of it. You can copy and paste, but that's tedious and gets in the way of experimenting. A better method is to press the Up Arrow key on your keyboard. This will insert the previous line of code into the shell. Keep pressing it to go further back in your history, and if you go too far, press the Down Arrow key to go the other way. Try using it now.</p>"
        ]
      },
      {
        "slug": "IntroducingStrings",
        "title": "Introducing Strings",
        "index": 2,
        "step_texts": [
          "<p>Python lets you do much more than calculate. In fact, we're not going to touch numbers or maths for a while. Instead, we're going to look at <em>strings</em>. Strings are essentially snippets of text. For example, enter the following into the shell, quotes (<code>'</code>) included:</p>\n<pre><code>'hello'\n</code></pre>",
          "<p>The shell simply gives the same thing back because there's nothing to further to calculate. <code>'hello'</code> is simply equal to <code>'hello'</code>.</p>\n<p>A string is a sequence of characters. A character is a single symbol such as a letter, number, punctuation, space, etc. In this case the string contains the 5 characters <code>hello</code>. The quotes are not part of the string - they are there to tell both humans and computers that this is a string consisting of whatever characters are between the quotes.</p>"
        ]
      },
      {
        "slug": "AddingStrings",
        "title": "Adding Strings",
        "index": 3,
        "step_texts": [
          "<p>Strings can be added together using <code>+</code>, although this means something very different from adding numbers. For example, try:</p>\n<pre><code>'hello' + 'world'\n</code></pre>",
          "<p>You can see that <code>+</code> combines or joins two strings together end to end. Technically, this is called concatenation.</p>\n<p>Here's an exercise: change the previous code slightly so that the result is the string <code>'hello world'</code>, i.e. with a space between the words.</p>\n<p>By the way, if you get stuck, you can click the lightbulb icon in the bottom right for a hint.</p>",
          "<p>Well done! Any of the following are valid solutions:</p>\n<pre><code>'hello ' + 'world'\n'hello' + ' world'\n'hello' + ' ' + 'world'\n</code></pre>"
        ]
      },
      {
        "slug": "IntroducingVariables",
        "title": "Introducing Variables",
        "index": 4,
        "step_texts": [
          "<p>To make interesting programs, we can't always manipulate the same values. We need a way to refer to values that are unknown ahead of time and can change - values that can vary. These are called <em>variables</em>.</p>\n<p>Run this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>",
          "<p>This creates a variable with the name <code>word</code> that refers to the string value <code>'Hello'</code>.</p>\n<p>Check now that this is true by simply running <code>word</code> in the shell by itself.</p>",
          "<p>Good. For comparison, run <code>'word'</code> in the shell by itself, with the quotes.</p>",
          "<p>As you can see, the quotes make all the difference. <code>'word'</code> is literally just <code>'word'</code>, hence it's technically called a <em>string literal</em>. On the other hand, <code>word</code> is a variable, whose value may be anything.</p>\n<p>Similarly, <code>'sunshine'</code> is <code>'sunshine'</code>, but what's <code>sunshine</code> without quotes?</p>",
          "<p>The answer is that <code>sunshine</code> looks like a variable, so Python tries to look up its value, but since we never defined a variable with that name we get an error.</p>"
        ]
      },
      {
        "slug": "UsingVariables",
        "title": "Using Variables",
        "index": 5,
        "step_texts": [
          "<p>Previously we made a variable called <code>word</code> with the value <code>'Hello'</code> with this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>\n<p>Now make a variable called <code>your_name</code> whose value is another string.</p>\n<p>(The character <code>_</code> in <code>your_name</code> is called an <em>underscore</em>. Use it to separate words when you want a variable name containing multiple words. You can type it on most keyboards by pressing Shift and hyphen/dash/minus (<code>-</code>).)</p>",
          "<p>You can use variables in calculations just like you would use literals. For example, try:</p>\n<pre><code>'Hello ' + your_name\n</code></pre>",
          "<p>Or you can just add variables together. Try:</p>\n<pre><code>word + your_name\n</code></pre>",
          "<p>Oops...that doesn't look nice. Can you modify the code above so that there's a space between the word and your name?</p>",
          "<p>Perfect!</p>\n<p>Variables can also change their values over time. Right now <code>word</code> has the value <code>'Hello'</code>. You can change its value in the same way that you set it for the first time. Run this:</p>\n<pre><code>word = 'Goodbye'\n</code></pre>",
          "<p>Now observe the effect of this change by running <code>word + ' ' + your_name</code> again.</p>",
          "<p>Those quotes around strings are getting annoying. Try running this:</p>\n<pre><code>print(word + ' ' + your_name)\n</code></pre>",
          "<p>Hooray! No more quotes! We'll break down what's happening in this code later. For now just know that <code>print(&lt;something&gt;)</code> displays <code>&lt;something&gt;</code> in the shell. In particular it displays the actual content of strings that we usually care about, instead of a representation of strings that's suitable for code which has things like quotes. The word <code>print</code> here has nothing to do with putting ink on paper.</p>"
        ]
      },
      {
        "slug": "WritingPrograms",
        "title": "Writing Programs",
        "index": 6,
        "step_texts": [
          "<p>It's time to stop doing everything in the shell. In the top right you can see the <em>editor</em>. This is a place where you can write and run longer programs. The shell is great and you should keep using it to explore, but the editor is where real programs live.</p>\n<p>Copy the program below into the editor, then click the 'Run' button:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nprint(word + ' ' + name)\nword = 'Goodbye'\nprint(word + ' ' + name)\n</code></pre>",
          "<p>Congratulations, you have run your first actual program!</p>\n<p>Take some time to understand this program. Python runs each line one at a time from top to bottom. You should try simulating this process in your head - think about what each line does. See how the value of <code>word</code> was changed and what effect this had. Note that when <code>print</code> is used multiple times, each thing (<code>Hello World</code> and <code>Goodbye World</code> in this case) is printed on its own line.</p>\n<p>Some things to note about programs in the editor:</p>\n<ol>\n<li>The program runs in the shell, meaning that the variables defined in the program now exist in the shell with the last values they had in the program. This lets you explore in the shell after the program completes. For example, <code>name</code> now has the value <code>'World'</code> in the shell.</li>\n<li>Programs run in isolation - they don't depend on any previously defined variables. The shell is reset and all previous variables are cleared. So even though <code>word</code> currently exists in the shell, if you delete the first line of the program and run it again, you'll get an error about <code>word</code> being undefined.</li>\n<li>If you enter code in the shell and it has a value, that value will automatically be displayed. That doesn't happen for programs in the editor - you have to print values. If you remove <code>print()</code> from the program, changing the two lines to just <code>word + ' ' + name</code>, nothing will be displayed.</li>\n</ol>\n<p>I recommend that you check all of these things for yourself.</p>"
        ]
      },
      {
        "slug": "StoringCalculationsInVariables",
        "title": "Storing Calculations In Variables",
        "index": 7,
        "step_texts": [
          "<p>Often you will use variables to store the results of calculations. This will help to build more complex programs. For example, try this program:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nsentence = word + ' ' + name\nprint(sentence)\n</code></pre>",
          "<p>Now <code>sentence</code> has the value <code>'Hello World'</code> which can be used multiple times. Note that it will continue to have this value until it is directly reassigned, e.g. with another statement like <code>sentence = &lt;something&gt;</code>. For example, add these two lines to the end of the program:</p>\n<pre><code>word = 'Goodbye'\nprint(sentence)\n</code></pre>",
          "<p>Unlike a spreadsheet where formulas update automatically, a variable like <code>sentence</code> doesn't remember how it was calculated and won't change if the underlying values <code>word</code> or <code>name</code> are changed.</p>"
        ]
      },
      {
        "slug": "IntroducingForLoops",
        "title": "Introducing For Loops",
        "index": 8,
        "step_texts": [
          "<p>Good news! You've made it past the boring basics. We can start to write some interesting programs and have a bit of fun. One of the most powerful concepts in programming is the <em>loop</em>, which lets you repeat the same code over and over. Python has two kinds of loop: <code>for</code> loops and <code>while</code> loops. Here is an example of a for loop, try running this program:</p>\n<pre><code>name = 'World'\nfor character in name: print(character)\n</code></pre>",
          "<p>You can read the code almost like normal English:</p>\n<blockquote>\n<p>For each character in the string <code>name</code>, print that character.</p>\n</blockquote>\n<p>Each character is just a normal string. <code>character</code> is a normal variable that is given a new value before the code after the <code>:</code> runs. So the code above is equivalent to:</p>\n<pre><code>name = 'World'\n\ncharacter = 'W'\nprint(character)\n\ncharacter = 'o'\nprint(character)\n\ncharacter = 'r'\nprint(character)\n\ncharacter = 'l'\nprint(character)\n\ncharacter = 'd'\nprint(character)\n</code></pre>\n<p>Note that we could use a different variable name, <code>character</code> just makes it clearer.</p>\n<p>A for loop generally follows this structure:</p>\n<pre><code>for &lt;variable&gt; in &lt;collection&gt;: &lt;code to repeat&gt;\n</code></pre>\n<p>The <code>for</code>, <code>in</code>, and <code>:</code> are all essential.</p>"
        ]
      },
      {
        "slug": "Indentation",
        "title": "Indentation",
        "index": 9,
        "step_texts": [
          "<p>This example loop:</p>\n<pre><code>for character in name: print(character)\n</code></pre>\n<p>works, but actually it would usually (and should) be written like this:</p>\n<pre><code>for character in name:\n    print(character)\n</code></pre>\n<p>Specifically, the code to be repeated (known as the <em>body</em>) starts on a new line after the colon (<code>:</code>), and it must be <em>indented</em>, i.e. have some spaces before it. The code below without indentation is invalid, run it to see for yourself:</p>\n<pre><code>for character in name:\nprint(character)\n</code></pre>",
          "<p>The spaces are required to tell Python which lines of code belong to the body of the for loop. This is critical when the loop contains several lines, which it often will. For example, run this code:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>",
          "<p>There are two indented lines, so they're both part of the body, so <code>---</code> gets printed after each character. Now try running the same code without the indentation in the last line:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\nprint('---')\n</code></pre>",
          "<p>Since <code>print('---')</code> is not indented, it's not part of the loop body. This means it only runs once, after the whole loop has finished running. Both programs are valid, they just do different things.</p>\n<p>The program below is invalid. Both lines in the loop body are indented, but by different amounts. The first line starts with 4 spaces, the second line starts with 2. Try running it.</p>\n<pre><code>for character in name:\n    print(character)\n  print('---')\n</code></pre>",
          "<p>When you indent, you should always indent by 4 spaces. Any consistent indentation is actually acceptable, but 4 spaces is the convention that almost everyone follows. Note that the editor generally makes this easy for you. For example, if you press the 'Tab' key on your keyboard in the editor, it will insert 4 spaces for you.</p>"
        ]
      },
      {
        "slug": "BasicForLoopExercises",
        "title": "Basic For Loop Exercises",
        "index": 10,
        "step_texts": [
          "<p>Time for some exercises! Modify this program:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>\n<p>to instead output:</p>\n<pre><code>---W\n---o\n---r\n---l\n---d\n</code></pre>",
          "<p>Splendid! Now write a program which prints <code>name</code> once for each character in <code>name</code>. For example, for <code>name = 'Amy'</code>, it should output:</p>\n<pre><code>Amy\nAmy\nAmy\n</code></pre>\n<p>For <code>name = 'World'</code>, it should output:</p>\n<pre><code>World\nWorld\nWorld\nWorld\nWorld\n</code></pre>\n<p>By the way, you can set <code>name</code> to anything in the first line. Only the rest of the program after that will be checked.</p>",
          "<p>We're making really good progress! You're solving problems and writing new code!\nLet's keep making things more interesting.</p>"
        ]
      },
      {
        "slug": "BuildingUpStrings",
        "title": "Building Up Strings",
        "index": 11,
        "step_texts": [
          "<p>Before we look at some more loops, we need to quickly learn another concept. Look at this program:</p>\n<pre><code>hello = 'Hello'\nprint(hello)\nhello = hello + '!'\nprint(hello)\n</code></pre>\n<p>What do you think the line <code>hello = hello + '!'</code> does? What do you think the program will output? Make a prediction, then run it to find out.</p>",
          "<p>Python doesn't care that <code>hello</code> is on both the left and the right of the <code>=</code>, it just does what it would always do if the variables were different: it calculates <code>hello + '!'</code> which at the time is <code>'Hello' + '!'</code> which is <code>'Hello!'</code>, and that becomes the new value of <code>hello</code>. If it helps, you can think of that line as split into two steps:</p>\n<pre><code>temp = hello + '!'\nhello = temp\n</code></pre>\n<p>or:</p>\n<pre><code>temp = hello\nhello = temp + '!'\n</code></pre>\n<p>This is very useful in a loop. Think about what this program will do, then run it:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>By the way, <code>''</code> is called the <em>empty string</em> - a string containing no characters.</p>",
          "<p>The details in the above program are important. What goes wrong if you swap the last two lines and run this program instead?</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    print(line)\n    line = line + char\n</code></pre>",
          "<p>The last character in <code>name</code> only gets added to <code>line</code> at the end of the loop, after <code>print(line)</code> has already run for the last time. So that character and the full <code>name</code> never get printed at the bottom of the triangle.</p>"
        ]
      },
      {
        "slug": "BuildingUpStringsExercises",
        "title": "Building Up Strings Exercises",
        "index": 12,
        "step_texts": [
          "<p>Modify this program:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>to add a space after every character in the triangle, so the output looks like this:</p>\n<pre><code>W\nW o\nW o r\nW o r l\nW o r l d\n</code></pre>",
          "<p>Tremendous! Now modify the program so that each line is backwards, like this:</p>\n<pre><code>W\noW\nroW\nlroW\ndlroW\n</code></pre>",
          "<p>Brilliant!</p>\n<p>Code like:</p>\n<pre><code>line = line + char\n</code></pre>\n<p>is so common that Python lets you abbreviate it. This means the same thing:</p>\n<pre><code>line += char\n</code></pre>\n<p>Note that there is no abbreviation for <code>line = char + line</code>.</p>\n<p>Now use <code>+=</code> and a for loop to write your own program which prints <code>name</code> 'underlined', like this:</p>\n<pre><code>World\n-----\n</code></pre>\n<p>There should be one <code>-</code> for each character in <code>name</code>.</p>",
          "<p>Fantastic!</p>\n<p>By the way, when you don't need to use a variable, it's common convention to name that variable <code>_</code> (underscore), e.g. <code>for _ in name:</code>. This doesn't change how the program runs, but it's helpful to readers.</p>\n<p>Let's make this fancier. Extend your program to draw a box around the name, like this:</p>\n<pre><code>+-------+\n| World |\n+-------+\n</code></pre>\n<p>Note that there is a space between the name and the pipes (<code>|</code>).</p>",
          "<p>You're getting good at this! Looks like you need more of a challenge...maybe instead of putting a name in a box, the name should be the box? Write a program that outputs this:</p>\n<pre><code>+World+\nW     W\no     o\nr     r\nl     l\nd     d\n+World+\n</code></pre>",
          "<p>Sweet! You're really getting the hang of this! If you want, here's one more optional bonus challenge. Try writing a program that outputs:</p>\n<pre><code>W\n o\n  r\n   l\n    d\n</code></pre>\n<p>Or don't, it's up to you.</p>"
        ]
      },
      {
        "slug": "BasicTerminology",
        "title": "Basic Terminology",
        "index": 13,
        "step_texts": [
          "<p>Here's some words you need to know:</p>\n<p>An <strong><em>expression</em></strong> is a piece of code that has a value. For example, in this line of code:</p>\n<pre><code>sentence = 'Hello ' + name\n</code></pre>\n<p>there are three expressions:</p>\n<ol>\n<li><code>'Hello '</code></li>\n<li><code>name</code></li>\n<li><code>'Hello ' + name</code></li>\n</ol>\n<p>By contrast, the full line <code>sentence = ...</code> is a <strong><em>statement</em></strong>. It's a command that tells the computer to perform an action. It has no value of its own. This means, for example, that you can't add statements together. This code is invalid:</p>\n<pre><code>(word = 'Hello') + (name = 'Bob')\n</code></pre>\n<p>Specifically, a statement like <code>sentence = ...</code> where a variable is given a value is called <strong><em>assignment</em></strong> - the value is <em>assigned to</em> the the variable.</p>\n<p>A program is a list of statements which are executed in order. A <code>for</code> loop is a <em>compound statement</em>, meaning it has a body of its own which contains other statements. Most statements will also contain expressions, and expressions can contain other smaller expressions, but expressions cannot contain statements.</p>\n<p>The process of calculating the value of an expression is called <strong><em>evaluation</em></strong> - note how it almost contains the word 'value'. The computer <em>evaluates</em> <code>1 + 2</code> to get the value <code>3</code>.</p>\n<p>The process of executing a loop is called <strong><em>iteration</em></strong>. Code like <code>for char in 'Hello':</code> is <em>iterating over</em> the string <code>'Hello'</code>. The fact that it's possible means that strings are <em>iterable</em>. By contrast, numbers are not iterable, which is exactly what Python will tell you if you try <code>for char in 3:</code>. Each run through the loop is <em>one iteration</em>, so in this example there will be 5 iterations.</p>"
        ]
      },
      {
        "slug": "IntroducingIfStatements",
        "title": "Introducing If Statements",
        "index": 14,
        "step_texts": [
          "<p>Now we're going to learn how to tell the computer to make decisions and only run code\nunder certain conditions. For this we will need a new type of value. You've seen\nnumbers and strings, now meet <em>booleans</em>. There are only two boolean values:\n<code>True</code> and <code>False</code>. Try this program:</p>\n<pre><code>condition = True\nprint(condition)\ncondition = False\nprint(condition)\n</code></pre>",
          "<p>Booleans are meant to be used inside <em>if statements</em> (sometimes also called <em>conditionals</em>).</p>\n<p>Here is a simple example for you to run:</p>\n<pre><code>if True:\n    print('This gets printed')\n\nif False:\n    print('This does not')\n</code></pre>",
          "<p>Note how the code inside the first <code>if</code> statement ran, but not the second.</p>\n<p>In general, an <code>if</code> statement looks like this:</p>\n<pre><code>if &lt;condition&gt;:\n    &lt;body&gt;\n</code></pre>\n<p>where <code>&lt;condition&gt;</code> is any expression which evaluates to a boolean and <code>&lt;body&gt;</code> is an <strong>indented</strong> list\nof one or more statements. The structure is quite similar to a <code>for</code> loop. Note the colon (<code>:</code>) which\nis essential.</p>\n<p>When the computer sees <code>if &lt;condition&gt;:</code>, it checks if <code>&lt;condition&gt;</code> is <code>True</code>. If it is, it runs the body.\nIf not, it skips it and continues to the rest of the program.</p>\n<p>Here's a more interesting example for you to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence += '!'\nprint(sentence)\n</code></pre>",
          "<p>(Remember that <code>sentence += '!'</code> means <code>sentence = sentence + '!'</code>)</p>\n<p>Change <code>excited = True</code> to <code>excited = False</code> and run the program again to see what the difference is.</p>",
          "<p>Time for an exercise. Modify the program above to include an extra\nboolean parameter <code>confused</code>, so the program should start like this:</p>\n<pre><code>sentence = 'Hello World'\nexcited = False\nconfused = True\n</code></pre>\n<p>(<code>sentence</code> can be any string and the two booleans can be either <code>True</code> or <code>False</code>)</p>\n<p>When <code>confused</code> is true, the printed sentence should have a question mark added to the end.\nIf both <code>confused</code> and <code>excited</code> are true, the sentence should end with <code>!?</code>.</p>",
          "<p>Well done! This program can do 4 different things depending on how you combine <code>excited</code>\nand <code>confused</code>. Try them out if you want.</p>"
        ]
      },
      {
        "slug": "CombiningCompoundStatements",
        "title": "Combining Compound Statements",
        "index": 15,
        "step_texts": [
          "<p>Compound statements like <code>for</code> loops and <code>if</code> statements have bodies which are a list\nof inner statements. Those inner statements can be anything, including other compound statements.\nTry this example of a <code>for</code> loop inside an <code>if</code> statement for when you want to show\nthat you're <em>really</em> excited:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    new_sentence = ''\n    for char in sentence:\n        new_sentence += char\n        new_sentence += '!'\n    sentence = new_sentence\n\nprint(sentence)\n</code></pre>",
          "<p>Note how the body of the <code>if</code> statement (5 lines) is indented as usual, while the body\nof the <code>for</code> loop (2 lines) is indented by an additional 4 spaces in each line to show that\nthose lines are within the <code>for</code> loop. You can see the overall structure of the program\njust by looking at the indentation.</p>\n<p>Alternatively, you can put an <code>if</code> inside a <code>for</code>:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nnew_sentence = ''\nfor char in sentence:\n    new_sentence += char\n    if excited:\n        new_sentence += '!'\n\nsentence = new_sentence\nprint(sentence)\n</code></pre>\n<p>These two programs have the exact same result. However the first one is more efficient as it\nonly iterates over the string if it needs to, since when <code>excited = False</code> nothing changes.</p>"
        ]
      },
      {
        "slug": "UnderstandingProgramsWithSnoop",
        "title": "Understanding Programs With Snoop",
        "index": 16,
        "step_texts": [
          "<p>Run this program:</p>\n<pre><code>sentence = 'Hello World'\n\ninclude = False\nnew_sentence = ''\nfor char in sentence:\n    if include:\n        new_sentence += char\n    include = True\n\nprint(new_sentence)\n</code></pre>",
          "<p>As you can see, it prints everything but the first character. Take some time to understand how this works.</p>\n<p>In fact, it's time to introduce a new tool to help you understand programs. Click the 'Snoop' button to run the same program while also showing what's happening.</p>",
          "<p>Tada! Scroll to the top of the terminal and let's walk through what snoop is showing you.\nIt starts out very straightforward:</p>\n<pre><code>    1 | sentence = 'Hello World'\n    3 | include = False\n    4 | new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The first lines are simply showing you the lines of the program that the computer ran.\nOn the left is the line number as seen in the editor.</p>\n<p>Running <code>for char in sentence:</code> assigns a value to the variable <code>char</code>, so snoop shows you that value.\nLines starting with <code>......</code> indicate a new variable or a change in the value of an existing variable.\nSuch lines will not be shown when they're redundant, which is why the snoop output doesn't start like this:</p>\n<pre><code>    1 | sentence = 'Hello World'\n ...... sentence = 'Hello World'\n    3 | include = False\n ...... include = False\n    4 | new_sentence = ''\n ...... new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The next two lines are:</p>\n<pre><code>    6 |     if include:\n    8 |     include = True\n</code></pre>\n<p>What's important here is what's not showing: because <code>include</code> is <code>False</code>, line 7 (<code>new_sentence += char</code>) gets skipped. But then <code>include</code> is set to <code>True</code>, so the next iteration of the loop is different:</p>\n<pre><code>    5 | for char in sentence:\n ...... char = 'e'\n    6 |     if include:\n    7 |         new_sentence += char\n .............. new_sentence = 'e'\n</code></pre>\n<p><code>new_sentence += char</code> runs for the first time and the variable <code>new_sentence</code> gets a new value.</p>\n<p>Now modify the program to do the opposite: only print the first character, leave out the rest.</p>",
          "<p>Great job! You're working with increasingly complex programs.</p>"
        ]
      },
      {
        "slug": "IfAndElse",
        "title": "<code>if</code> and <code>else</code>",
        "index": 17,
        "step_texts": [
          "<p>An <code>if</code> statement can optionally have an <code>else</code> part. Run this example:</p>\n<pre><code>condition = True\nif condition:\n    print('Yes')\nelse:\n    print('No')\n</code></pre>",
          "<p>Now change the first line to <code>condition = False</code> and run it again.</p>",
          "<p>Think of <code>else</code> as saying 'or else' or 'otherwise'. It means that if the condition in the <code>if</code>\nis false, then the body of the <code>else</code> will run instead. Whether the condition is true or false,\nexactly one of the two bodies will run.</p>\n<p>Here's a more interesting example to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence = sentence.upper()\nelse:\n    sentence = sentence.lower()\nprint(sentence)\n</code></pre>",
          "<p><code>sentence.upper()</code> is a new kind of expression we haven't encountered yet. What's going on here is that <code>sentence</code> is a string and strings have various <em>methods</em> that let you conveniently calculate new values from them, including <code>upper</code> and <code>lower</code>. The names refer to uppercase (capital letters) and lowercase (small letters). <code>'Hello World'.upper()</code> evaluates to <code>'HELLO WORLD'</code>. It doesn't change the contents of <code>sentence</code> though, so you have to assign the new value again with <code>sentence = sentence.upper()</code>.</p>\n<p>Now change <code>excited</code> to <code>False</code> and run it again.</p>",
          "<p>Here's a broken program:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    char = '!'\nsentence += char\n\nprint(sentence)\n</code></pre>\n<p>Can you see the problem? If you run it, everything seems fine. What could go wrong?</p>\n<p>Spoilers below! Have you figured it out?</p>\n<p>What happens if you change <code>excited</code> to <code>False</code>?</p>",
          "<p>If <code>excited</code> is true then <code>char</code> is defined and everything runs fine. But otherwise\n<code>char</code> never gets assigned a value, so trying to use it in <code>sentence += char</code> fails.</p>\n<p>Fix this by adding an <code>else</code> clause to the <code>if</code> so that if <code>excited</code> is false, a full stop (<code>.</code>)\nis added to the end of the sentence instead of an exclamation mark (<code>!</code>).</p>",
          "<p>Time for a challenge!</p>\n<p>Write a program which, given a string <code>sentence</code>, prints a modified version with\nthe same letters, where the first letter is capitalised and the rest are lowercase.\nFor example, the output should be <code>Hello world</code> whether the input <code>sentence = 'hello world'</code>\nor <code>'HELLO WORLD'</code>.</p>",
          "<p>Excellent!!!</p>\n<p>One more exercise, and then you can relax. </p>\n<p>Write a program which prints <code>sentence</code> mockingly, e.g:</p>\n<pre><code>OnE MoRe eXeRcIsE, aNd tHeN YoU CaN ReLaX.\n</code></pre>\n<p>Every second character should be lowercased, the rest should be uppercase.</p>",
          "<p>Perfect! Take a moment to be proud of what you've achieved. Can you feel your brain growing?</p>"
        ]
      },
      {
        "slug": "TheEqualityOperator",
        "title": "The Equality Operator",
        "index": 18,
        "step_texts": [
          "<p>There are several ways to obtain booleans without assigning them directly,\nwhich allows you to construct very useful <code>if</code> statements. In particular there\nare many <em>comparison operators</em> which compare the values of two expressions.\nThe most common is the equality operator which checks if two values are equal.\nIt's denoted by two equals signs: <code>==</code>. Try running this:</p>\n<pre><code>print(1 + 2 == 3)\nprint(4 + 5 == 6)\nprint('ab' + 'c' == 'a' + 'bc')\n</code></pre>",
          "<p>As you can see, if the values are equal, the equality expression evaluates to <code>True</code>,\notherwise it's <code>False</code>.</p>\n<p>Note the difference between the equality operator <code>==</code> and a single <code>=</code> which has different meanings,\nparticularly in assignment statements as you've seen them so far. What happens if you try\nremoving a single <code>=</code> from the previous program?</p>",
          "<p>Let's use <code>==</code> in an <code>if</code> statement. In this program, the <code>if</code> body runs only when <code>c</code> is the character <code>'s'</code>. See for yourself.</p>\n<pre><code>name = 'kesha'\nnew_name = ''\nfor c in name:\n    if c == 's':\n        c = '$'\n    new_name += c\n\nprint(new_name)\n</code></pre>",
          "<p>Now extend the program to also replace <code>e</code> with <code>3</code> and <code>a</code> with <code>@</code>.</p>",
          "<p>Well done!</p>"
        ]
      },
      {
        "slug": "IntroducingElif",
        "title": "Introducing <code>elif</code>",
        "index": 19,
        "step_texts": [
          "<p>Quick biology lesson! Most of the cells in your body contain your full genetic code in DNA.\nThis consists of strands of molecular units called nucleobases which come in four varieties:\nAdenine, Cytosine, Guanine, and Thymine, or ACGT for short.\nSo part of a single strand might be something like:</p>\n<pre><code>AGTAGCGTCCTTAGTTACAGGATGGCTTAT...\n</code></pre>\n<p>This will be paired with another strand where A is replaced by T and vice versa,\nand C is replaced by G and vice versa, e.g:</p>\n<pre><code>TCATCGCAGGAATCAATGTCCTACCGAATA...\n</code></pre>\n<p>The two strands are 'zipped' together into the famous double helix structure,\njoined by the matching A-T and C-G pairs. These pairings are essential in copying DNA when\ncells divide and reproduce. The double helix is unzipped and the code is transcribed\ninto its opposite version to make the copy.</p>\n<p>We're going to repeat that process. Let's try the same kind of program we just wrote:</p>\n<pre><code>dna = 'AGTAGCGTC'\nopposite_dna = ''\nfor char in dna:\n    if char == 'A':\n        char = 'T'\n    if char == 'T':\n        char = 'A'\n    if char == 'G':\n        char = 'C'\n    if char == 'C':\n        char = 'G'\n    opposite_dna += char\n\nprint(opposite_dna)\n</code></pre>",
          "<p>Oh dear, that doesn't quite work. <code>T</code> is changed to <code>A</code> but <code>A</code> isn't changed to anything.\nCan you see why?</p>\n<p>When <code>char == 'A'</code>, then the body <code>char = 'T'</code> does indeed run. But that means that the following\ncondition <code>char == 'T'</code> also passes and so <code>char = 'A'</code> and we're back where we started.\nWe need to only change <code>char</code> from <code>T</code> to <code>A</code> if <code>char</code> wasn't already <code>A</code> to begin with,\nmeaning <code>char == 'A'</code> was <code>False</code>. We can do that with an <code>else</code>, like so:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelse:\n    if char == 'T':\n        char = 'A'\n</code></pre>\n<p>Now fix the program to replace all characters correctly.</p>",
          "<p>Brilliant! You have mimicked what your own cells are constantly doing.</p>\n<p>An <code>if</code> inside an <code>else</code> can be replaced by a single keyword <code>elif</code>. For example,\nthe previous code can be changed to this:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelif char == 'T':\n    char = 'A'\nelif char == 'G':\n    char = 'C'\nelif char == 'C':\n    char = 'G'\n</code></pre>",
          "<p>It's common to have a chain of <code>elif</code> clauses when you want exactly one of many\nbodies to run, like in this case. In general, code like this:</p>\n<pre><code>if X:\n    ...\nelse:\n    if Y:\n        ...\n    else:\n        if Z:\n            ...\n        else:\n            ...\n</code></pre>\n<p>can be rewritten as:</p>\n<pre><code>if X:\n    ...\nelif Y:\n    ...\nelif Z:\n    ...\nelse:\n    ...\n</code></pre>\n<p>which is both shorter and saves you from unpleasant nested indentation.\nThe difference is only cosmetic: once the computer runs this code, it can't\ntell the difference between the two versions.</p>\n<p>Note that <code>elif</code>(s) can optionally be followed by one final <code>else</code>. We didn't include one\nin our DNA example, but we could add one to alert us to any unexpected characters\nin the input, or change <code>elif char == 'C':</code> to <code>else:</code> if we were confident\nabout the input being valid.</p>"
        ]
      },
      {
        "slug": "OtherComparisonOperators",
        "title": "Other Comparison Operators",
        "index": 20,
        "step_texts": [
          "<p>The opposite of the equals operator <code>==</code> is the <em>not equals</em> operator <code>!=</code>. If you squint it sort of looks like \u2260. It evaluates to <code>True</code> when two values are...not equal. Try it for yourself in the shell.</p>",
          "<p>Here's a cute little program using <code>!=</code>:</p>\n<pre><code>sentence = \"The e key on my keyboard is broken\"\nnew_sentence = ''\nfor c in sentence:\n    if c != 'e':\n        new_sentence += c\nprint(new_sentence)\n</code></pre>",
          "<p>Other handy operators are <code>&lt;</code> (less than) and <code>&gt;</code> (greater than). For example, <code>a &lt; b</code> means \"<code>a</code> is less than <code>b</code>\". Try using one of these in the shell to compare two numbers.</p>",
          "<p>You can also use these operators to compare strings. If you arrange two strings in alphabetical order, the first one is 'less than' the second. See for yourself.</p>",
          "<p>Here's a practical example of <code>&lt;</code> in action for you to try:</p>\n<pre><code>percentage = 73\n\nif percentage &lt; 20:\n    grade = \"F\"\nelif percentage &lt; 40:\n    grade = \"D\"\nelif percentage &lt; 60:\n    grade = \"C\"\nelif percentage &lt; 80:\n    grade = \"B\"\nelse:\n    grade = \"A\"\n\nprint(grade)\n</code></pre>\n<p>Recall that <code>elif percentage &lt; 40</code> after <code>if percentage &lt; 20</code> means \"if the percentage wasn't less than 20 and also is less than 40\", so it will pass for all numbers from 20 to 39 inclusive. Similarly a 'C' is for percentages from 40 to 59, and an 'A' is for any number 80 and up.</p>",
          "<p>Now for an exercise: write a program that takes three variables <code>x1</code>, <code>x2</code>, and <code>x3</code>, and prints the value of the smallest one. So for:</p>\n<pre><code>x1 = 'Charlie'\nx2 = 'Alice'\nx3 = 'Bob'\n</code></pre>\n<p>it should print <code>Alice</code>.</p>",
          "<p>Marvelous!</p>\n<p>There are many ways this could be solved. Here's one solution:</p>\n<pre><code>if x1 &lt; x2:\n    if x1 &lt; x3:\n        first = x1\n    else:\n        first = x3\nelse:\n    if x2 &lt; x3:\n        first = x2\n    else:\n        first = x3\n\nprint(first)\n</code></pre>\n<p>Here's another:</p>\n<pre><code>first = x1\n\nif x2 &lt; first:\n    first = x2\n\nif x3 &lt; first:\n    first = x3\n\nprint(first)\n</code></pre>\n<p>These programs (and yours too) all work equally well with numbers and strings,\nbut not a mixture.</p>\n<p><code>&lt;</code> and <code>&gt;</code> evaluate to False if the compared values are equal. For example,\n3 is not less than 3, so <code>3 &lt; 3</code> and <code>3 &gt; 3</code> are both False.\nTo allow equal values, use <code>&lt;=</code> and <code>&gt;=</code>.\nAgain, if you squint, they look a bit like \u2264 and \u2265.\nNote that the <code>=</code> comes second - there are no such operators as <code>=&lt;</code> or <code>=&gt;</code>.\nTo remember this, read them out loud as \"less than or equal to\"\nand \"greater than or equal to\".</p>\n<p>In summary, the main comparison operators are <code>==</code>, <code>!=</code>, <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>, and <code>&gt;=</code>.\nIf you ever have doubts about what they do, play with them in the shell!</p>"
        ]
      },
      {
        "slug": "IntroducingLists",
        "title": "Introducing Lists",
        "index": 21,
        "step_texts": [
          "<p>It's time to learn about a powerful new type of value called lists. Here's an example:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor word in words:\n    print(word)\n</code></pre>",
          "<p>A list is a <em>sequence</em> (an ordered collection/container) of any number of values.\nThe values are often referred to as <em>elements</em>.\nThey can be anything: numbers, strings, booleans, even lists! They can also be a mixture of types.</p>\n<p>To create a list directly, like above:</p>\n<ol>\n<li>Write some square brackets: <code>[]</code></li>\n<li>If you don't want an empty list, write some expressions inside to be the elements.</li>\n<li>Put commas (<code>,</code>) between elements to separate them.</li>\n</ol>\n<p>Here's another example of making a list:</p>\n<pre><code>x = 1\nthings = ['Hello', x, x + 3]\nprint(things)\n</code></pre>",
          "<p>As you saw above, lists are <em>iterable</em>, meaning you can iterate over them with a <code>for loop</code>.\nHere's a program that adds up all the numbers in a list:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9]\n\ntotal = 0\nfor number in numbers:\n    total += number\n\nprint(total)\n</code></pre>",
          "<p>Now modify the program so that it can add up a list of strings instead of numbers.\nFor example, given:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n</code></pre>\n<p>it should print:</p>\n<pre><code>Thisisalist\n</code></pre>",
          "<p>Optional bonus challenge: extend the program to insert a separator string <em>between</em> each word.\nFor example, given</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\nseparator = ' - '\n</code></pre>\n<p>it would output:</p>\n<pre><code>This - is - a - list\n</code></pre>\n<p>Lists and strings have a lot in common.\nFor example, you can add two lists to combine them together into a new list.\nYou can also create an empty list that has no elements.\nCheck for yourself:</p>\n<pre><code>numbers = [1, 2] + [3, 4]\nprint(numbers)\nnew_numbers = []\nnew_numbers += numbers\nnew_numbers += [5]\nprint(new_numbers)\n</code></pre>\n<p>With that knowledge, write a program which takes a list of numbers\nand prints a list where each number has been doubled. For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[6, 2, 8, 2, 10, 18, 4, 12, 10]\n</code></pre>",
          "<p>Great!</p>\n<p>When you want to add a single element to the end of a list, instead of:</p>\n<pre><code>some_list += [element]\n</code></pre>\n<p>it's actually more common to write:</p>\n<pre><code>some_list.append(element)\n</code></pre>\n<p>There isn't really a big difference between these, but <code>.append</code>\nwill be more familiar and readable to most people.</p>\n<p>Now use <code>.append</code> to write a program which prints a list containing only the numbers bigger than 5.</p>\n<p>For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[9, 6]\n</code></pre>",
          "<p>Fantastic! We're making great progress.</p>"
        ]
      },
      {
        "slug": "UsingBreak",
        "title": "Using <code>break</code> to end a loop early",
        "index": 22,
        "step_texts": [
          "<p>Exercise: write a program which takes a list and a value and checks\nif the list contains the value. For example, given:</p>\n<pre><code>things = ['This', 'is', 'a', 'list']\nthing_to_find = 'is'\n</code></pre>\n<p>it should print <code>True</code>, but for</p>\n<pre><code>thing_to_find = 'other'\n</code></pre>\n<p>it should print <code>False</code>.</p>",
          "<p>Nice!</p>\n<p>A typical solution looks something like this:</p>\n<pre><code>found = False\nfor thing in things:\n    if thing == thing_to_find:\n        found = True\n\nprint(found)\n</code></pre>\n<p>Your solution is probably similar. It's fine, but it's a bit inefficient.\nThat's because it'll loop over the entire list even if it finds the element at the beginning.\nYou can stop any loop using a <code>break</code> statement, like so:</p>\n<pre><code>for thing in things:\n    if thing == thing_to_find:\n        found = True\n        break\n</code></pre>\n<p>This is just as correct but skips unnecessary iterations and checks once it finds the element.\nYou can use snoop to see the difference.</p>"
        ]
      },
      {
        "slug": "GettingElementsAtPosition",
        "title": "Getting Elements at a Position",
        "index": 23,
        "step_texts": [
          "<p>Looping is great, but often you just want to retrieve a single element from the list at a known position.\nHere's how:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nprint(words[0])\nprint(words[1])\nprint(words[2])\nprint(words[3])\n</code></pre>",
          "<p>In general, you can get the element at the position <code>i</code> with <code>words[i]</code>. The operation is called <em>subscripting</em> or <em>indexing</em>, and the position is called the <em>index</em>.</p>\n<p>You've probably noticed that the first index is 0, not 1. In programming, counting starts at 0. It seems weird, but that's how most programming languages do it, and it's generally agreed to be better.</p>\n<p>This also means that the last index in this list of 4 elements is 3. What happens if you try getting an index greater than that?</p>",
          "<p>There you go. <code>words[4]</code> and beyond don't exist, so trying that will give you an error.</p>\n<p>By the way, you can get the number of elements in a list (commonly called the <em>length</em>) using <code>len(words)</code>.\nThat means that the last valid index of the list is <code>len(words) - 1</code>, so the last element is <code>words[len(words) - 1]</code>. Try these for yourself.</p>\n<p>So in general, the valid indices are:</p>\n<pre><code>[0, 1, 2, ..., len(words) - 2, len(words) - 1]\n</code></pre>\n<p>There's a handy built in function to give you these values, called <code>range</code>:</p>\n<pre><code>for i in range(10):\n    print(i)\n</code></pre>",
          "<p><code>range(n)</code> is similar to the list <code>[0, 1, 2, ..., n - 2, n - 1]</code>.\nThis gives us an alternative way to loop over a list:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor index in range(len(words)):\n    print(index)\n    print(words[index])\n</code></pre>",
          "<p>Let's get some exercise! Given a list <code>things</code> and a value <code>to_find</code>,\nprint the first index of <code>to_find</code> in the list, i.e. the lowest number <code>i</code> such that\n<code>things[i]</code> is <code>to_find</code>. For example, for</p>\n<pre><code>things = ['on', 'the', 'way', 'to', 'the', 'store']\nto_find = 'the'\n</code></pre>\n<p>your program should print <code>1</code>.</p>\n<p>You can assume that <code>to_find</code> appears at least once.</p>",
          "<p>Nice!</p>\n<p>By the way, indexing and <code>len()</code> also work on strings. Try them out in the shell.</p>\n<p>Here's another exercise. Given two strings of equal length, e.g:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"World\"\n</code></pre>\n<p>print them vertically side by side, with a space between each character:</p>\n<pre><code>H W\ne o\nl r\nl l\no d\n</code></pre>",
          "<p>Incredible!</p>\n<p>Your solution probably looks something like this:</p>\n<pre><code>for i in range(len(string1)):\n    char1 = string1[i]\n    char2 = string2[i]\n    print(char1 + ' ' + char2)\n</code></pre>\n<p>This doesn't work so well if the strings have different lengths.\nIn fact, it goes wrong in different ways depending on whether <code>string1</code> or <code>string2</code> is longer.\nYour next challenge is to fix this problem by filling in 'missing' characters with spaces.</p>\n<p>For example, for:</p>\n<pre><code>string1 = \"Goodbye\"\nstring2 = \"World\"\n</code></pre>\n<p>output:</p>\n<pre><code>G W\no o\no r\nd l\nb d\ny  \ne\n</code></pre>\n<p>and for:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"Elizabeth\"\n</code></pre>\n<p>output:</p>\n<pre><code>H E\ne l\nl i\nl z\no a\n  b\n  e\n  t\n  h\n</code></pre>",
          "<p>Magnificent! Take a break, you've earned it!</p>"
        ]
      },
      {
        "slug": "CallingFunctionsTerminology",
        "title": "Terminology: Calling functions and methods",
        "index": 24,
        "step_texts": [
          "<p>It's time to expand your vocabulary some more.</p>\n<p><code>print</code> and <code>len</code> are <strong><em>functions</em></strong>. See for yourself:</p>\n<pre><code>print(len)\nprint(print)\n</code></pre>",
          "<p>An expression like <code>len(things)</code> or <code>print(things)</code> is a function <strong><em>call</em></strong> - when you write that, you are <strong><em>calling</em></strong> the function <code>len</code> or <code>print</code>. The fact that this is possible means that functions are <strong><em>callable</em></strong>:</p>\n<pre><code>print(callable(len))\n</code></pre>",
          "<p>Most things are not callable, so trying to call them will give you an error:</p>\n<pre><code>f = 'a string'\nprint(callable(f))\nf()\n</code></pre>",
          "<p>In the call <code>len(things)</code>, <code>things</code> is an <strong><em>argument</em></strong>. Sometimes you will also see the word <strong><em>parameter</em></strong>, which means basically the same thing as argument. It's a bit like you're giving the argument to the function - specifically we say that the argument <code>things</code> is <em>passed</em> to <code>len</code>, and <code>len</code> <em>accepts</em> or <em>receives</em> the argument.</p>\n<p><code>len(things)</code> will evaluate to a number such as 3, in which case we say that <code>len</code> <strong><em>returned</em></strong> 3.</p>\n<p>All calls have to return something...even if it's nothing. For example, <code>print</code>'s job is to display something on screen, not to return a useful value. So it returns something useless instead:</p>\n<pre><code>things = [1, 2, 3]\nlength = len(things)\nprinted = print(length)\nprint(printed)\n</code></pre>",
          "<p><code>None</code> is a special 'null' value which can't do anything interesting. It's a common placeholder that represents the lack of a real useful value. Functions that don't want to return anything return <code>None</code> by default. If you see an error message about <code>None</code> or <code>NoneType</code>, it often means you assigned the wrong thing to a variable:</p>\n<pre><code>things = print([1, 2, 3])\nlength = len(things)\n</code></pre>",
          "<p>A <strong><em>method</em></strong> is a function which belongs to a type, and can be called on all values of that type using <code>.</code>. For example, <code>upper</code> and <code>lower</code> are methods of strings, which are called with e.g. <code>word.upper()</code>:</p>\n<pre><code>word = 'Hello'\nprint(word.upper)\nprint(word.upper())\n</code></pre>",
          "<p>Another example is that <code>append</code> is a method of lists. But you can't use <code>.upper</code> on a list or <code>.append</code> on a string:</p>\n<pre><code>word = 'Hello'\nword.append('!')\n</code></pre>",
          "<p>The word 'attribute' in the error message refers to the use of <code>.</code> - the error actually comes just from <code>word.append</code>, without even a call.</p>"
        ]
      },
      {
        "slug": "FunctionsAndMethodsForLists",
        "title": "Functions And Methods For Lists",
        "index": 25,
        "step_texts": [
          "<p>Let's review how to work with lists. Suppose we have a list <code>nums = [1, 2, 3]</code>. You can use:</p>\n<ul>\n<li><strong><code>append</code></strong>: Add an element to the end of the list. <code>nums.append(4)</code> changes the list to <code>[1, 2, 3, 4]</code>.</li>\n<li><strong><code>len</code></strong>: Returns the number of elements. <code>len(nums)</code> is <code>3</code>.</li>\n<li><strong><code>range</code></strong>: <code>range(n)</code> is an object similar to the list of numbers from 0 to <code>n - 1</code>. In particular, <code>range(len(nums))</code> is like <code>[0, 1, 2]</code>.</li>\n<li><strong><code>subscripting</code></strong>: Get a value at an index. <code>nums[0]</code> is 1, <code>nums[1]</code> is 2, <code>nums[2]</code> is 3.</li>\n<li><strong><code>+</code></strong>: Concatenates lists. <code>nums + [4, 5]</code> is <code>[1, 2, 3, 4, 5]</code>.</li>\n</ul>\n<p>Here's some new things. Try them out in the shell.</p>\n<ul>\n<li><strong><code>subscript assignment</code></strong>: Set a value at an index. <code>nums[0] = 9</code> changes the list to <code>[9, 2, 3]</code>.</li>\n<li><strong><code>join</code></strong>: Add a list of strings with a separator in between. This is a method of strings (the separator) which takes an iterable of strings as an argument. <code>'--'.join(['apples', 'oranges', 'bananas'])</code> returns <code>'apples--oranges--bananas'</code>. You can also use an empty string if you don't want a separator, e.g. <code>''.join(['apples', 'oranges', 'bananas'])</code> returns <code>'applesorangesbananas'</code>. </li>\n<li><strong><code>sum</code></strong>: Add a list of numbers. <code>sum(nums)</code> is 6.</li>\n<li><strong><code>in</code></strong>: A comparison operator that checks if a value is in a list. <code>2 in nums</code> is <code>True</code>, but <code>4 in nums</code> is <code>False</code>.</li>\n<li><strong><code>index</code></strong>: Returns the first index of a value in a list. <code>[7, 8, 9, 8].index(8)</code> is 1. Raises an error if the value isn't there.</li>\n</ul>\n<p>You may recognise some of these from your exercises. I assure you that those exercises were not pointless, as you've now learned valuable fundamental skills. For example, you can use <code>in</code> to check if a list contains 5, but there's no similarly easy way to check for a number bigger than 5.</p>\n<p>It's useful to know these functions, but it's not easy to learn them all, and there's many more. A more important skill is being able to look things up. For example, here are some typical ways you might Google the above functions if you forgot their names:</p>\n<ul>\n<li><code>append</code><ul>\n<li>python add element to list</li>\n<li>python add item at end of list</li>\n</ul>\n</li>\n<li><code>len</code><ul>\n<li>python size of list</li>\n<li>python number of elements in list</li>\n<li>python how many characters in string</li>\n</ul>\n</li>\n<li><code>join</code><ul>\n<li>python combine list of strings with separator</li>\n<li>python add together list of strings with string in between</li>\n</ul>\n</li>\n<li><code>sum</code><ul>\n<li>python add list of numbers</li>\n<li>python total of numbers</li>\n</ul>\n</li>\n<li><code>in</code><ul>\n<li>python check if list contains value</li>\n<li>python test if list has element</li>\n</ul>\n</li>\n<li><code>index</code><ul>\n<li>python get position of element</li>\n<li>python get index of value</li>\n</ul>\n</li>\n</ul>\n<p>Let's practice this skill now. Find a function/method that returns the value in a list which is bigger than any other value. For example, given the list <code>[21, 55, 4, 91, 62, 49]</code>, it will return <code>91</code>. You should write the answer in the shell as a single small expression. For example, if you were looking for the function <code>sum</code>, you could write <code>sum([21, 55, 4, 91, 62, 49])</code>. Don't solve this manually with a loop.</p>",
          "<p>Good find! Let's do one more. Consider this program:</p>\n<pre><code>nums = [1, 2, 3, 4, 5]\nnums.append(9)\nprint(nums)\n</code></pre>\n<p>This changes <code>nums</code> so that it prints:</p>\n<pre><code>[1, 2, 3, 4, 5, 9]\n</code></pre>\n<p>But suppose you don't want the 9 to be at the end, you want it to go between the second and third elements, so the output is:</p>\n<pre><code>[1, 2, 9, 3, 4, 5]\n</code></pre>\n<p>Replace the middle line (i.e. the call to <code>append</code>) with the right function/method call to do that.</p>",
          "<p>Perfect!</p>\n<p>It can also be useful to Google things like \"python list tutorial\", e.g. if:</p>\n<ul>\n<li>Googling a specific method has failed so you want to find it manually.</li>\n<li>You're still confused about lists after this course.</li>\n<li>It's been a while since you learned about lists and you need a reminder.</li>\n<li>You're struggling to solve a problem with lists and you need to go back to basics and strengthen your foundations.</li>\n</ul>\n<p>There are also ways to find information without any googling. Try <code>dir([])</code> in the shell.</p>",
          "<p><code>dir()</code> returns a list of the argument's attributes, which are mostly methods. Many will start with <code>__</code> which you can ignore for now - scroll to the end of the list and you'll see some familiar methods.</p>\n<p>Here are a few more useful functions/methods. Suppose <code>nums = [28, 99, 10, 81, 59, 64]</code></p>\n<ul>\n<li><strong><code>sorted</code></strong>: Takes an iterable and returns a list of the elements in order. <code>sorted(nums)</code> returns <code>[10, 28, 59, 64, 81, 99]</code>.</li>\n<li><strong><code>pop</code></strong>: Removes and returns an element at a given index. <code>nums.pop(3)</code> removes <code>nums[3]</code> (<code>81</code>) from the list and returns it. Without an argument, i.e. just <code>nums.pop()</code>, it will remove and return the last element.</li>\n<li><strong><code>remove</code></strong>: Removes the first occurrence of the given element. <code>nums.remove(10)</code> will leave <code>nums</code> as <code>[28, 99, 81, 59, 64]</code>. Raises an error if the value doesn't exist. Equivalent to <code>nums.pop(nums.index(10))</code>.</li>\n<li><strong><code>count</code></strong>: Returns the number of times the argument appears in the list. <code>[1, 2, 3, 2, 7, 2, 5].count(2)</code> is 3.</li>\n</ul>\n<p>You've already seen that <code>len</code> and subscripting work with strings, a bit as if strings are lists of characters. Strings also support some of the new methods we've learned, not just for characters but for any substring. For example:</p>\n<ul>\n<li><code>'the' in 'feed the dog and the cat'</code> is <code>True</code></li>\n<li><code>'feed the dog and the cat'.count('the')</code> is 2</li>\n<li><code>'feed the dog and the cat'.index('the')</code> is 5</li>\n</ul>\n<p>Note that in most cases, methods which modify a list in place (<code>append</code>, <code>insert</code>, <code>remove</code>) merely return <code>None</code>, while the remaining functions/methods return a new useful value without changing the original argument. The only exception is the <code>pop</code> method.</p>\n<p>Modifying a value directly is called <em>mutation</em> - types of values which can be mutated are <em>mutable</em>, while those that can't are <em>immutable</em>. Strings are immutable - they don't have any methods like <code>append</code> or even subscript assignment. You simply can't change a string - you can only create new strings and use those instead. That means that this is a useless statement on its own:</p>\n<pre><code>word.upper()\n</code></pre>\n<p>The string referred to by <code>word</code> isn't modified, instead <code>word.upper()</code> returned a new string which was immediately discarded. If you want to change the value that <code>word</code> refers to, you have to assign a new value to the variable:</p>\n<pre><code>word = word.upper()\n</code></pre>\n<p>Or you can use <code>word.upper()</code> immediately in a larger expression, e.g.</p>\n<pre><code>if word.lower() == 'yes':\n</code></pre>"
        ]
      },
      {
        "slug": "UnderstandingProgramsWithPythonTutor",
        "title": "Understanding Programs With Python Tutor",
        "index": 26,
        "step_texts": [
          "<p>It's time to learn about another tool to explore programs.\nCopy the code below into the editor and then click the new \"Python Tutor\" button.\nThe button opens a new tab with a visualisation from <a href=\"http://pythontutor.com\">pythontutor.com</a>.\nThere you can navigate through the program step by step with the \"Prev\" or \"Next\" buttons, or drag\nthe slider left or right. You can also see the values of variables on the right.</p>\n<pre><code>all_numbers = [2, 4, 8, 1, 9, 7]\n\nsmall_numbers = []\nbig_numbers = []\n\nfor number in all_numbers:\n    if number &lt;= 5:\n        small_numbers.append(number)\n    else:\n        big_numbers.append(number)\n\nprint(small_numbers)\nprint(big_numbers)\n</code></pre>",
          "<p>Note that the code runs twice separately: once here, once on pythontutor.com.\nDepending on your program, the two runs may produce different results.</p>"
        ]
      },
      {
        "slug": "EqualsVsIs",
        "title": "<code>==</code> vs <code>is</code>",
        "index": 27,
        "step_texts": [
          "<p>It's time to learn some technical details that are often misunderstood and lead to errors.\nRun this program:</p>\n<pre><code>list1 = [1, 2, 3]\nlist2 = [1, 2, 3]\n\nprint(list1)\nprint(list2)\nprint(list1 == list2)\n\nprint(list1 is list2)\n\nlist1.append(4)\n\nprint(list1)\nprint(list2)\n</code></pre>",
          "<p>This program is quite straightforward and mostly consists of things you're familiar with.\nWe create two variables which refer to lists.\nThe lists have the same elements, so they are equal: <code>list1 == list2</code> is <code>True</code>.</p>\n<p>But then there's a new comparison operator: <code>is</code>. Here <code>list1 is list2</code> is <code>False</code>.\nThat means that regardless of the two lists being equal,\nthey are still two separate, distinct, individual lists.\nAs a result, when you append 4 to <code>list1</code>, only <code>list1</code> changes.</p>\n<p>Now change <code>list2 = [1, 2, 3]</code> to <code>list2 = list1</code> and see what difference it makes.</p>",
          "<p>Now <code>list1 is list2</code> is <code>True</code>, because <em>there is only one list</em>, and the two variables\n<code>list1</code> and <code>list2</code> both refer to that same list. <code>list1.append(4)</code> appends to the one list\nand the result can be seen in both <code>print(list1)</code> and <code>print(list2)</code> because both lines\nare now just different ways of printing the same list.</p>\n<p>I recommend running both versions with Python Tutor to see how it visualises the difference.\nIn the second case, the two variables both have arrows pointing to a single list object.</p>\n<p><code>list2 = list1</code> doesn't create an eternal link between the variables. If you assign a new value\nto <em>either</em> of the variables, e.g. <code>list1 = [7, 8, 9]</code>, the other variable will be unaffected\nand will still point to the original list.</p>\n<p>Basically, an assignment like:</p>\n<pre><code>list2 = &lt;expression&gt;\n</code></pre>\n<p>means 'make the variable <code>list2</code> refer to whatever <code>&lt;expression&gt;</code> evaluates to'.\nIt doesn't make a copy of that value, which is how both variables can end up pointing to the same list.\nBut as we've learned before, <code>list2</code> doesn't remember <code>&lt;expression&gt;</code>, only the value.\nIt doesn't know about other variables.</p>\n<p>You can copy a list with the <code>copy</code> method:</p>\n<pre><code>list2 = list1.copy()\n</code></pre>\n<p>This will make the program behave like the first version again.</p>\n<p>If you come across this kind of problem and you're still having trouble understanding this stuff, read the essay <a href=\"https://nedbatchelder.com/text/names.html\">Facts and myths about Python names and values</a>.</p>"
        ]
      },
      {
        "slug": "ModifyingWhileIterating",
        "title": "Modifying While Iterating",
        "index": 28,
        "step_texts": [
          "<p>Consider this program. It loops through a numbers and removes the ones smaller than 10. Or at least, it tries to. I recommend running it with Python Tutor.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor i in range(len(numbers)):\n    number = numbers[i]\n    if number &lt;= 10:\n        numbers.pop(i)\nprint(numbers)\n</code></pre>\n<p>(remember that <code>numbers.pop(i)</code> removes the element from <code>numbers</code> at index <code>i</code>)</p>\n<p>As it runs, it clearly skips even looking at 7 or 3 and doesn't remove them, and at the end it fails when it tries to access an index that's too high. Can you see why this happens?</p>\n<p>The index variable <code>i</code> runs through the usual values 0, 1, 2, ... as it's supposed to, but as the list changes those are no longer the positions we want. For example in the first iteration <code>i</code> is 0 and <code>number</code> is 10, which gets removed. This shifts the rest of the numbers left one position, so now 7 is in position 0. But then in the next iteration <code>i</code> is 1, and <code>numbers[i]</code> is 8. 7 got skipped. </p>\n<p>We could try writing the program to use <code>remove</code> instead of <code>pop</code> so we don't have to use indices. It even looks nicer this way.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor number in numbers:\n    if number &lt;= 10:\n        numbers.remove(number)\nprint(numbers)\n</code></pre>\n<p>But it turns out this does the same thing, for the same reason. Iterating over a list still goes through the indices under the hood.</p>\n<p>The lesson here is to <strong><em>never modify something while you iterate over it</em></strong>. Keep mutation and looping separate.</p>\n<p>The good news is that there are many ways to solve this. You can instead just loop over a copy, as in:</p>\n<pre><code>for number in numbers.copy():\n</code></pre>\n<p>Now the list being modified and the list being itererated over are separate objects, even if they start out with equal contents.</p>\n<p>Similarly, you could loop over the original and modify a copy:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = numbers.copy()\n\nfor number in numbers:\n    if number &lt;= 10:\n        big_numbers.remove(number)\nprint(big_numbers)\n</code></pre>\n<p>Or you could build up a new list from scratch. In this case, we've already done a similar thing in an exercise:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = []\n\nfor number in numbers:\n    if number &gt; 10:\n        big_numbers.append(number)\nprint(big_numbers)\n</code></pre>"
        ]
      },
      {
        "slug": "IntroducingNestedLoops",
        "title": "Introducing Nested Loops",
        "index": 29,
        "step_texts": [
          "<p>You've seen that the indented body of an <code>if</code> or a loop can contain any kind of statement, including more <code>if</code> statements and loops. In particular a loop can contain another loop. Here's an example:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(number)\n</code></pre>",
          "<p>This is called a <em>nested loop</em>. Nothing about it is really new, it's just worth understanding properly because it can be very useful for writing interesting programs.</p>\n<p>Let's add a line to separate sections of the output:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(number)\n    print('---')\n</code></pre>",
          "<p>Make sure you fully grasp what's going on. <code>print(letter)</code> and <code>print('---')</code> each run 3 times, because their indentation puts them in the <em>outer loop</em>. <code>print(number)</code> is called 3 \u00d7 4 = 12 times, because it's in the <em>inner loop</em> <code>for number in range(4):</code> which has 4 iterations but is itself in the outer loop so it runs 3 times.</p>\n<p>One more tweak:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(letter, number)\n    print('---')\n</code></pre>",
          "<p><code>print(letter, number)</code> gives <code>print</code> two arguments. <code>print</code> can take any number of arguments, and it will output them all on the same line, with spaces in between. If you try using <code>print(letter + ' ' + number)</code> instead you'll get an error, because you can't add strings and numbers. We'll come back to that later.</p>\n<p>Let's put this to use! Suppose you're a teacher and you need to print out all the multiplication tables from 1 to 12 for your students. You don't want to write them manually, but you can write a program to do it for you! Your program output should look like this including the lines of dashes:</p>\n<pre><code>1 x 1 = 1\n1 x 2 = 2\n1 x 3 = 3\n1 x 4 = 4\n1 x 5 = 5\n1 x 6 = 6\n1 x 7 = 7\n1 x 8 = 8\n1 x 9 = 9\n1 x 10 = 10\n1 x 11 = 11\n1 x 12 = 12\n----------\n2 x 1 = 2\n2 x 2 = 4\n2 x 3 = 6\n2 x 4 = 8\n2 x 5 = 10\n2 x 6 = 12\n2 x 7 = 14\n2 x 8 = 16\n2 x 9 = 18\n2 x 10 = 20\n2 x 11 = 22\n2 x 12 = 24\n----------\n3 x 1 = 3\n3 x 2 = 6\n3 x 3 = 9\n(you get the idea...)\n11 x 10 = 110\n11 x 11 = 121\n11 x 12 = 132\n----------\n12 x 1 = 12\n12 x 2 = 24\n12 x 3 = 36\n12 x 4 = 48\n12 x 5 = 60\n12 x 6 = 72\n12 x 7 = 84\n12 x 8 = 96\n12 x 9 = 108\n12 x 10 = 120\n12 x 11 = 132\n12 x 12 = 144\n----------\n</code></pre>",
          "<p>Perfect!</p>\n<p>Next exercise: you're organising a tournament for a game, such as chess or tennis. You have a list of player names:</p>\n<pre><code>players = [\"Alice\", \"Bob\", \"Charlie\"]\n</code></pre>\n<p>Every player is going to play against every other player twice: once where they get the advantage (e.g. by moving or serving first) and once not. Print out all the match combinations like this:</p>\n<pre><code>Alice vs Bob\nAlice vs Charlie\nBob vs Alice\nBob vs Charlie\nCharlie vs Alice\nCharlie vs Bob\n</code></pre>\n<p>Note that \"Alice vs Bob\" and \"Bob vs Alice\" are both in the list, but there's no \"Alice vs Alice\" - we don't want anyone playing with themselves.</p>",
          "<p>Well done! If you'd like a bonus challenge, remove the repetition and only output each pair of players once, e.g:</p>\n<pre><code>Alice vs Bob\nAlice vs Charlie\nBob vs Charlie\n</code></pre>\n<p>For your next exercise, you need to crack a password. You know that it's exactly four letters long and that only a few letters are possible, which you've written down:</p>\n<pre><code>letters = \"ABCD\"\n</code></pre>\n<p>You need to print out all possible passwords:</p>\n<pre><code>AAAA\nAAAB\nAAAC\nAAAD\nAABA\nAABB\n...skipping a few...\nDDDA\nDDDB\nDDDC\nDDDD\n</code></pre>",
          "<p>Wow, you're basically a hacker now!</p>\n<p>One more exercise. Given a size:</p>\n<pre><code>size = 5\n</code></pre>\n<p>Print out an 'upside down' triangle made of the letter <code>O</code> whose sides are as long as the given size, e.g:</p>\n<pre><code>OOOOO\nOOOO\nOOO\nOO\nO\n</code></pre>",
          "<p>Wow, you're an artist too!</p>"
        ]
      }
    ],
    "user": {
      "email": "[email protected]",
      "developerMode": false
    },
    "processing": false,
    "numHints": 0,
    "editorContent": "",
    "messages": [],
    "pastMessages": [],
    "requestingSolution": false,
    "solution": {
      "tokens": [],
      "maskedIndices": [],
      "mask": []
    }
  }
}

{
  "rpc": {
    "loading": [],
    "error": {
      "traceback": "Traceback (most recent call last):\n  File \"/usr/src/app/backend/main/views.py\", line 52, in api_view\n    result = method(**args)\n  File \"/usr/src/app/backend/main/views.py\", line 178, in move_step\n    self.next_page()\n  File \"/usr/src/app/backend/main/views.py\", line 188, in next_page\n    self.user.page_slug = page_slugs_list[self.page.index + 1]\nIndexError: list index out of range\n",
      "method": "move_step",
      "data": {
        "delta": 1
      }
    }
  },
  "book": {
    "server": {
      "hints": [],
      "step_index": 7,
      "page_index": 29,
      "showEditor": true,
      "showSnoop": true,
      "showPythonTutor": true,
      "showBirdseye": true
    },
    "pages": [
      {
        "title": "Introducing The Shell",
        "step_texts": [
          "<p>At the bottom right of the screen is the <em>shell</em>. This is a place for running small bits of Python code. Just type in some code, press enter, and it'll run! Try it now:</p>\n<ol>\n<li>Click anywhere on the shell (the black area).</li>\n<li>Type <code>1+2</code></li>\n<li>Press the Enter key on your keyboard.</li>\n</ol>",
          "<p>Great! Python evaluated <code>1+2</code> and got the result <code>3</code>, so the shell displays that.</p>\n<p>The shell is probably your most important tool for learning Python, and you should spend lots of time experimenting and exploring in it. Be curious! Constantly ask yourself \"What would happen if I ran X?\" and then immediately answer that question by running it! Never be scared to try something out - if you get something wrong, nothing bad will happen.</p>\n<p>Try doing some more calculations now. You can multiply numbers with <code>*</code>, divide with <code>/</code>, and subtract with <code>-</code>. You can also use parentheses, i.e. <code>(</code> and <code>)</code>.</p>",
          "<p>Excellent! Keep experimenting. When you're ready, click 'Next' to continue.</p>"
        ]
      },
      {
        "title": "Navigating Shell History",
        "step_texts": [
          "<p>Here's a tip: often you will want to re-run a previously entered bit of code, or a slightly modified version of it. You can copy and paste, but that's tedious and gets in the way of experimenting. A better method is to press the Up Arrow key on your keyboard. This will insert the previous line of code into the shell. Keep pressing it to go further back in your history, and if you go too far, press the Down Arrow key to go the other way. Try using it now.</p>"
        ]
      },
      {
        "title": "Introducing Strings",
        "step_texts": [
          "<p>Python lets you do much more than calculate. In fact, we're not going to touch numbers or maths for a while. Instead, we're going to look at <em>strings</em>. Strings are essentially snippets of text. For example, enter the following into the shell, quotes (<code>'</code>) included:</p>\n<pre><code>'hello'\n</code></pre>",
          "<p>The shell simply gives the same thing back because there's nothing to further to calculate. <code>'hello'</code> is simply equal to <code>'hello'</code>.</p>\n<p>A string is a sequence of characters. A character is a single symbol such as a letter, number, punctuation, space, etc. In this case the string contains the 5 characters <code>hello</code>. The quotes are not part of the string - they are there to tell both humans and computers that this is a string consisting of whatever characters are between the quotes.</p>"
        ]
      },
      {
        "title": "Adding Strings",
        "step_texts": [
          "<p>Strings can be added together using <code>+</code>, although this means something very different from adding numbers. For example, try:</p>\n<pre><code>'hello' + 'world'\n</code></pre>",
          "<p>You can see that <code>+</code> combines or joins two strings together end to end. Technically, this is called concatenation.</p>\n<p>Here's an exercise: change the previous code slightly so that the result is the string <code>'hello world'</code>, i.e. with a space between the words.</p>\n<p>By the way, if you get stuck, you can click the lightbulb icon in the bottom right for a hint.</p>",
          "<p>Well done! Any of the following are valid solutions:</p>\n<pre><code>'hello ' + 'world'\n'hello' + ' world'\n'hello' + ' ' + 'world'\n</code></pre>"
        ]
      },
      {
        "title": "Introducing Variables",
        "step_texts": [
          "<p>To make interesting programs, we can't always manipulate the same values. We need a way to refer to values that are unknown ahead of time and can change - values that can vary. These are called <em>variables</em>.</p>\n<p>Run this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>",
          "<p>This creates a variable with the name <code>word</code> that refers to the string value <code>'Hello'</code>.</p>\n<p>Check now that this is true by simply running <code>word</code> in the shell by itself.</p>",
          "<p>Good. For comparison, run <code>'word'</code> in the shell by itself, with the quotes.</p>",
          "<p>As you can see, the quotes make all the difference. <code>'word'</code> is literally just <code>'word'</code>, hence it's technically called a <em>string literal</em>. On the other hand, <code>word</code> is a variable, whose value may be anything.</p>\n<p>Similarly, <code>'sunshine'</code> is <code>'sunshine'</code>, but what's <code>sunshine</code> without quotes?</p>",
          "<p>The answer is that <code>sunshine</code> looks like a variable, so Python tries to look up its value, but since we never defined a variable with that name we get an error.</p>"
        ]
      },
      {
        "title": "Using Variables",
        "step_texts": [
          "<p>Previously we made a variable called <code>word</code> with the value <code>'Hello'</code> with this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>\n<p>Now make a variable called <code>name</code> whose value is another string. The string can be anything...how about your name?</p>",
          "<p>You can use variables in calculations just like you would use literals. For example, try:</p>\n<pre><code>'Hello ' + name\n</code></pre>",
          "<p>Or you can just add variables together. Try:</p>\n<pre><code>word + name\n</code></pre>",
          "<p>Oops...that doesn't look nice. Can you modify the code above so that there's a space between the word and the name?</p>",
          "<p>Perfect!</p>\n<p>Variables can also change their values over time. Right now <code>word</code> has the value <code>'Hello'</code>. You can change its value in the same way that you set it for the first time. Run this:</p>\n<pre><code>word = 'Goodbye'\n</code></pre>",
          "<p>Now observe the effect of this change by running <code>word + ' ' + name</code> again.</p>",
          "<p>Those quotes around strings are getting annoying. Try running this:</p>\n<pre><code>print(word + ' ' + name)\n</code></pre>",
          "<p>Hooray! No more quotes! We'll break down what's happening in this code later. For now just know that <code>print(&lt;something&gt;)</code> displays <code>&lt;something&gt;</code> in the shell. In particular it displays the actual content of strings that we usually care about, instead of a representation of strings that's suitable for code which has things like quotes. The word <code>print</code> here has nothing to do with putting ink on paper.</p>"
        ]
      },
      {
        "title": "Writing Programs",
        "step_texts": [
          "<p>It's time to stop doing everything in the shell. In the top right you can see the <em>editor</em>. This is a place where you can write and run longer programs. The shell is great and you should keep using it to explore, but the editor is where real programs live.</p>\n<p>Copy the program below into the editor, then click the 'Run' button:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nprint(word + ' ' + name)\nword = 'Goodbye'\nprint(word + ' ' + name)\n</code></pre>",
          "<p>Congratulations, you have run your first actual program!</p>\n<p>Take some time to understand this program. Python runs each line one at a time from top to bottom. You should try simulating this process in your head - think about what each line does. See how the value of <code>word</code> was changed and what effect this had. Note that when <code>print</code> is used multiple times, each thing (<code>Hello World</code> and <code>Goodbye World</code> in this case) is printed on its own line.</p>\n<p>Some things to note about programs in the editor:</p>\n<ol>\n<li>The program runs in the shell, meaning that the variables defined in the program now exist in the shell with the last values they had in the program. This lets you explore in the shell after the program completes. For example, <code>name</code> now has the value <code>'World'</code> in the shell.</li>\n<li>Programs run in isolation - they don't depend on any previously defined variables. The shell is reset and all previous variables are cleared. So even though <code>word</code> currently exists in the shell, if you delete the first line of the program and run it again, you'll get an error about <code>word</code> being undefined.</li>\n<li>If you enter code in the shell and it has a value, that value will automatically be displayed. That doesn't happen for programs in the editor - you have to print values. If you remove <code>print()</code> from the program, changing the two lines to just <code>word + ' ' + name</code>, nothing will be displayed.</li>\n</ol>\n<p>I recommend that you check all of these things for yourself.</p>"
        ]
      },
      {
        "title": "Storing Calculations In Variables",
        "step_texts": [
          "<p>Often you will use variables to store the results of calculations. This will help to build more complex programs. For example, try this program:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nsentence = word + ' ' + name\nprint(sentence)\n</code></pre>",
          "<p>Now <code>sentence</code> has the value <code>'Hello World'</code> which can be used multiple times. Note that it will continue to have this value until it is directly reassigned, e.g. with another statement like <code>sentence = &lt;something&gt;</code>. For example, add these two lines to the end of the program:</p>\n<pre><code>word = 'Goodbye'\nprint(sentence)\n</code></pre>",
          "<p>Unlike a spreadsheet where formulas update automatically, a variable like <code>sentence</code> doesn't remember how it was calculated and won't change if the underlying values <code>word</code> or <code>name</code> are changed.</p>"
        ]
      },
      {
        "title": "Introducing For Loops",
        "step_texts": [
          "<p>Good news! You've made it past the boring basics. We can start to write some interesting programs and have a bit of fun. One of the most powerful concepts in programming is the <em>loop</em>, which lets you repeat the same code over and over. Python has two kinds of loop: <code>for</code> loops and <code>while</code> loops. Here is an example of a for loop, try running this program:</p>\n<pre><code>name = 'World'\nfor character in name: print(character)\n</code></pre>",
          "<p>You can read the code almost like normal English:</p>\n<blockquote>\n<p>For each character in the string <code>name</code>, print that character.</p>\n</blockquote>\n<p>Each character is just a normal string. <code>character</code> is a normal variable that is given a new value before the code after the <code>:</code> runs. So the code above is equivalent to:</p>\n<pre><code>name = 'World'\n\ncharacter = 'W'\nprint(character)\n\ncharacter = 'o'\nprint(character)\n\ncharacter = 'r'\nprint(character)\n\ncharacter = 'l'\nprint(character)\n\ncharacter = 'd'\nprint(character)\n</code></pre>\n<p>Note that we could use a different variable name, <code>character</code> just makes it clearer.</p>\n<p>A for loop generally follows this structure:</p>\n<pre><code>for &lt;variable&gt; in &lt;collection&gt;: &lt;code to repeat&gt;\n</code></pre>\n<p>The <code>for</code>, <code>in</code>, and <code>:</code> are all essential.</p>"
        ]
      },
      {
        "title": "Indentation",
        "step_texts": [
          "<p>This example loop:</p>\n<pre><code>for character in name: print(character)\n</code></pre>\n<p>works, but actually it would usually (and should) be written like this:</p>\n<pre><code>for character in name:\n    print(character)\n</code></pre>\n<p>Specifically, the code to be repeated (known as the <em>body</em>) starts on a new line after the colon (<code>:</code>), and it must be <em>indented</em>, i.e. have some spaces before it. The code below without indentation is invalid, run it to see for yourself:</p>\n<pre><code>for character in name:\nprint(character)\n</code></pre>",
          "<p>The spaces are required to tell Python which lines of code belong to the body of the for loop. This is critical when the loop contains several lines, which it often will. For example, run this code:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>",
          "<p>There are two indented lines, so they're both part of the body, so <code>---</code> gets printed after each character. Now try running the same code without the indentation in the last line:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\nprint('---')\n</code></pre>",
          "<p>Since <code>print('---')</code> is not indented, it's not part of the loop body. This means it only runs once, after the whole loop has finished running. Both programs are valid, they just do different things.</p>\n<p>The program below is invalid. Both lines in the loop body are indented, but by different amounts. The first line starts with 4 spaces, the second line starts with 2. Try running it.</p>\n<pre><code>for character in name:\n    print(character)\n  print('---')\n</code></pre>",
          "<p>When you indent, you should always indent by 4 spaces. Any consistent indentation is actually acceptable, but 4 spaces is the convention that almost everyone follows. Note that the editor generally makes this easy for you. For example, if you press the 'Tab' key on your keyboard in the editor, it will insert 4 spaces for you.</p>"
        ]
      },
      {
        "title": "Basic For Loop Exercises",
        "step_texts": [
          "<p>Time for some exercises! Modify this program:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>\n<p>to instead output:</p>\n<pre><code>---W\n---o\n---r\n---l\n---d\n</code></pre>",
          "<p>Splendid! Now write a program which prints <code>name</code> once for each character in <code>name</code>. For example, for <code>name = 'Amy'</code>, it should output:</p>\n<pre><code>Amy\nAmy\nAmy\n</code></pre>\n<p>For <code>name = 'World'</code>, it should output:</p>\n<pre><code>World\nWorld\nWorld\nWorld\nWorld\n</code></pre>\n<p>By the way, you can set <code>name</code> to anything in the first line. Only the rest of the program after that will be checked.</p>",
          "<p>We're making really good progress! You're solving problems and writing new code!\nLet's keep making things more interesting.</p>"
        ]
      },
      {
        "title": "Building Up Strings",
        "step_texts": [
          "<p>Before we look at some more loops, we need to quickly learn another concept. Look at this program:</p>\n<pre><code>hello = 'Hello'\nprint(hello)\nhello = hello + '!'\nprint(hello)\n</code></pre>\n<p>What do you think the line <code>hello = hello + '!'</code> does? What do you think the program will output? Make a prediction, then run it to find out.</p>",
          "<p>Python doesn't care that <code>hello</code> is on both the left and the right of the <code>=</code>, it just does what it would always do if the variables were different: it calculates <code>hello + '!'</code> which at the time is <code>'Hello' + '!'</code> which is <code>'Hello!'</code>, and that becomes the new value of <code>hello</code>. If it helps, you can think of that line as split into two steps:</p>\n<pre><code>temp = hello + '!'\nhello = temp\n</code></pre>\n<p>or:</p>\n<pre><code>temp = hello\nhello = temp + '!'\n</code></pre>\n<p>This is very useful in a loop. Think about what this program will do, then run it:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>By the way, <code>''</code> is called the <em>empty string</em> - a string containing no characters.</p>",
          "<p>The details in the above program are important. What goes wrong if you swap the last two lines and run this program instead?</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    print(line)\n    line = line + char\n</code></pre>",
          "<p>The last character in <code>name</code> only gets added to <code>line</code> at the end of the loop, after <code>print(line)</code> has already run for the last time. So that character and the full <code>name</code> never get printed at the bottom of the triangle.</p>"
        ]
      },
      {
        "title": "Building Up Strings Exercises",
        "step_texts": [
          "<p>Modify this program:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>to add a space after every character in the triangle, so the output looks like this:</p>\n<pre><code>W\nW o\nW o r\nW o r l\nW o r l d\n</code></pre>",
          "<p>Tremendous! Now modify the program so that each line is backwards, like this:</p>\n<pre><code>W\noW\nroW\nlroW\ndlroW\n</code></pre>",
          "<p>Brilliant!</p>\n<p>Code like:</p>\n<pre><code>line = line + char\n</code></pre>\n<p>is so common that Python lets you abbreviate it. This means the same thing:</p>\n<pre><code>line += char\n</code></pre>\n<p>Note that there is no abbreviation for <code>line = char + line</code>.</p>\n<p>Now use <code>+=</code> and a for loop to write your own program which prints <code>name</code> 'underlined', like this:</p>\n<pre><code>World\n-----\n</code></pre>\n<p>There should be one <code>-</code> for each character in <code>name</code>.</p>",
          "<p>Fantastic!</p>\n<p>By the way, when you don't need to use a variable, it's common convention to name that variable <code>_</code> (underscore), e.g. <code>for _ in name:</code>. This doesn't change how the program runs, but it's helpful to readers.</p>\n<p>Let's make this fancier. Extend your program to draw a box around the name, like this:</p>\n<pre><code>+-------+\n| World |\n+-------+\n</code></pre>\n<p>Note that there is a space between the name and the pipes (<code>|</code>).</p>",
          "<p>You're getting good at this! Looks like you need more of a challenge...maybe instead of putting a name in a box, the name should be the box? Write a program that outputs this:</p>\n<pre><code>+World+\nW     W\no     o\nr     r\nl     l\nd     d\n+World+\n</code></pre>",
          "<p>Sweet! You're really getting the hang of this! If you want, here's one more optional bonus challenge. Try writing a program that outputs:</p>\n<pre><code>W\n o\n  r\n   l\n    d\n</code></pre>\n<p>Or don't, it's up to you.</p>"
        ]
      },
      {
        "title": "Basic Terminology",
        "step_texts": [
          "<p>Here's some words you need to know:</p>\n<p>An <strong><em>expression</em></strong> is a piece of code that has a value. For example, in this line of code:</p>\n<pre><code>sentence = 'Hello ' + name\n</code></pre>\n<p>there are three expressions:</p>\n<ol>\n<li><code>'Hello '</code></li>\n<li><code>name</code></li>\n<li><code>'Hello ' + name</code></li>\n</ol>\n<p>By contrast, the full line <code>sentence = ...</code> is a <strong><em>statement</em></strong>. It's a command that tells the computer to perform an action. It has no value of its own. This means, for example, that you can't add statements together. This code is invalid:</p>\n<pre><code>(word = 'Hello') + (name = 'Bob')\n</code></pre>\n<p>Specifically, a statement like <code>sentence = ...</code> where a variable is given a value is called <strong><em>assignment</em></strong> - the value is <em>assigned to</em> the the variable.</p>\n<p>A program is a list of statements which are executed in order. A <code>for</code> loop is a <em>compound statement</em>, meaning it has a body of its own which contains other statements. Most statements will also contain expressions, and expressions can contain other smaller expressions, but expressions cannot contain statements.</p>\n<p>The process of calculating the value of an expression is called <strong><em>evaluation</em></strong> - note how it almost contains the word 'value'. The computer <em>evaluates</em> <code>1 + 2</code> to get the value <code>3</code>.</p>\n<p>The process of executing a loop is called <strong><em>iteration</em></strong>. Code like <code>for char in 'Hello':</code> is <em>iterating over</em> the string <code>'Hello'</code>. The fact that it's possible means that strings are <em>iterable</em>. By contrast, numbers are not iterable, which is exactly what Python will tell you if you try <code>for char in 3:</code>. Each run through the loop is <em>one iteration</em>, so in this example there will be 5 iterations.</p>"
        ]
      },
      {
        "title": "Introducing If Statements",
        "step_texts": [
          "<p>Now we're going to learn how to tell the computer to make decisions and only run code\nunder certain conditions. For this we will need a new type of value. You've seen\nnumbers and strings, now meet <em>booleans</em>. There are only two boolean values:\n<code>True</code> and <code>False</code>. Try this program:</p>\n<pre><code>condition = True\nprint(condition)\ncondition = False\nprint(condition)\n</code></pre>",
          "<p>Booleans are meant to be used inside <em>if statements</em> (sometimes also called <em>conditionals</em>).</p>\n<p>Here is a simple example for you to run:</p>\n<pre><code>if True:\n    print('This gets printed')\n\nif False:\n    print('This does not')\n</code></pre>",
          "<p>Note how the code inside the first <code>if</code> statement ran, but not the second.</p>\n<p>In general, an <code>if</code> statement looks like this:</p>\n<pre><code>if &lt;condition&gt;:\n    &lt;body&gt;\n</code></pre>\n<p>where <code>&lt;condition&gt;</code> is any expression which evaluates to a boolean and <code>&lt;body&gt;</code> is an <strong>indented</strong> list\nof one or more statements. The structure is quite similar to a <code>for</code> loop. Note the colon (<code>:</code>) which\nis essential.</p>\n<p>When the computer sees <code>if &lt;condition&gt;:</code>, it checks if <code>&lt;condition&gt;</code> is <code>True</code>. If it is, it runs the body.\nIf not, it skips it and continues to the rest of the program.</p>\n<p>Here's a more interesting example for you to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence += '!'\nprint(sentence)\n</code></pre>",
          "<p>(Remember that <code>sentence += '!'</code> means <code>sentence = sentence + '!'</code>)</p>\n<p>Change <code>excited = True</code> to <code>excited = False</code> and run the program again to see what the difference is.</p>",
          "<p>Time for an exercise. Modify the program above to include an extra\nboolean parameter <code>confused</code>, so the program should start like this:</p>\n<pre><code>sentence = 'Hello World'\nexcited = False\nconfused = True\n</code></pre>\n<p>(<code>sentence</code> can be any string and the two booleans can be either <code>True</code> or <code>False</code>)</p>\n<p>When <code>confused</code> is true, the printed sentence should have a question mark added to the end.\nIf both <code>confused</code> and <code>excited</code> are true, the sentence should end with <code>!?</code>.</p>",
          "<p>Well done! This program can do 4 different things depending on how you combine <code>excited</code>\nand <code>confused</code>. Try them out if you want.</p>"
        ]
      },
      {
        "title": "Combining Compound Statements",
        "step_texts": [
          "<p>Compound statements like <code>for</code> loops and <code>if</code> statements have bodies which are a list\nof inner statements. Those inner statements can be anything, including other compound statements.\nTry this example of a <code>for</code> loop inside an <code>if</code> statement for when you want to show\nthat you're <em>really</em> excited:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    new_sentence = ''\n    for char in sentence:\n        new_sentence += char\n        new_sentence += '!'\n    sentence = new_sentence\n\nprint(sentence)\n</code></pre>",
          "<p>Note how the body of the <code>if</code> statement (5 lines) is indented as usual, while the body\nof the <code>for</code> loop (2 lines) is indented by an additional 4 spaces in each line to show that\nthose lines are within the <code>for</code> loop. You can see the overall structure of the program\njust by looking at the indentation.</p>\n<p>Alternatively, you can put an <code>if</code> inside a <code>for</code>:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nnew_sentence = ''\nfor char in sentence:\n    new_sentence += char\n    if excited:\n        new_sentence += '!'\n\nsentence = new_sentence\nprint(sentence)\n</code></pre>\n<p>These two programs have the exact same result. However the first one is more efficient as it\nonly iterates over the string if it needs to, since when <code>excited = False</code> nothing changes.</p>"
        ]
      },
      {
        "title": "Understanding Programs With Snoop",
        "step_texts": [
          "<p>Run this program:</p>\n<pre><code>sentence = 'Hello World'\n\ninclude = False\nnew_sentence = ''\nfor char in sentence:\n    if include:\n        new_sentence += char\n    include = True\n\nprint(new_sentence)\n</code></pre>",
          "<p>As you can see, it prints everything but the first character. Take some time to understand how this works.</p>\n<p>In fact, it's time to introduce a new tool to help you understand programs. Click the 'Snoop' button to run the same program while also showing what's happening.</p>",
          "<p>Tada! Scroll to the top of the terminal and let's walk through what snoop is showing you.\nIt starts out very straightforward:</p>\n<pre><code>    1 | sentence = 'Hello World'\n    3 | include = False\n    4 | new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The first lines are simply showing you the lines of the program that the computer ran.\nOn the left is the line number as seen in the editor.</p>\n<p>Running <code>for char in sentence:</code> assigns a value to the variable <code>char</code>, so snoop shows you that value.\nLines starting with <code>......</code> indicate a new variable or a change in the value of an existing variable.\nSuch lines will not be shown when they're redundant, which is why the snoop output doesn't start like this:</p>\n<pre><code>    1 | sentence = 'Hello World'\n ...... sentence = 'Hello World'\n    3 | include = False\n ...... include = False\n    4 | new_sentence = ''\n ...... new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The next two lines are:</p>\n<pre><code>    6 |     if include:\n    8 |     include = True\n</code></pre>\n<p>What's important here is what's not showing: because <code>include</code> is <code>False</code>, line 7 (<code>new_sentence += char</code>) gets skipped. But then <code>include</code> is set to <code>True</code>, so the next iteration of the loop is different:</p>\n<pre><code>    5 | for char in sentence:\n ...... char = 'e'\n    6 |     if include:\n    7 |         new_sentence += char\n .............. new_sentence = 'e'\n</code></pre>\n<p><code>new_sentence += char</code> runs for the first time and the variable <code>new_sentence</code> gets a new value.</p>\n<p>Now modify the program to do the opposite: only print the first character, leave out the rest.</p>",
          "<p>Great job! You're working with increasingly complex programs.</p>"
        ]
      },
      {
        "title": "<code>if</code> and <code>else</code>",
        "step_texts": [
          "<p>An <code>if</code> statement can optionally have an <code>else</code> part. Run this example:</p>\n<pre><code>condition = True\nif condition:\n    print('Yes')\nelse:\n    print('No')\n</code></pre>",
          "<p>Now change the first line to <code>condition = False</code> and run it again.</p>",
          "<p>Think of <code>else</code> as saying 'or else' or 'otherwise'. It means that if the condition in the <code>if</code>\nis false, then the body of the <code>else</code> will run instead. Whether the condition is true or false,\nexactly one of the two bodies will run.</p>\n<p>Here's a more interesting example to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence = sentence.upper()\nelse:\n    sentence = sentence.lower()\nprint(sentence)\n</code></pre>",
          "<p><code>sentence.upper()</code> is a new kind of expression we haven't encountered yet. What's going on here is that <code>sentence</code> is a string and strings have various <em>methods</em> that let you conveniently calculate new values from them, including <code>upper</code> and <code>lower</code>. The names refer to uppercase (capital letters) and lowercase (small letters). <code>'Hello World'.upper()</code> evaluates to <code>'HELLO WORLD'</code>. It doesn't change the contents of <code>sentence</code> though, so you have to assign the new value again with <code>sentence = sentence.upper()</code>.</p>\n<p>Now change <code>excited</code> to <code>False</code> and run it again.</p>",
          "<p>Here's a broken program:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    char = '!'\nsentence += char\n\nprint(sentence)\n</code></pre>\n<p>Can you see the problem? If you run it, everything seems fine. What could go wrong?</p>\n<p>Spoilers below! Have you figured it out?</p>\n<p>What happens if you change <code>excited</code> to <code>False</code>?</p>",
          "<p>If <code>excited</code> is true then <code>char</code> is defined and everything runs fine. But otherwise\n<code>char</code> never gets assigned a value, so trying to use it in <code>sentence += char</code> fails.</p>\n<p>Fix this by adding an <code>else</code> clause to the <code>if</code> so that if <code>excited</code> is false, a full stop (<code>.</code>)\nis added to the end of the sentence instead of an exclamation mark (<code>!</code>).</p>",
          "<p>Time for a challenge!</p>\n<p>Write a program which, given a string <code>sentence</code>, prints a modified version with\nthe same letters, where the first letter is capitalised and the rest are lowercase.\nFor example, the output should be <code>Hello world</code> whether the input <code>sentence = 'hello world'</code>\nor <code>'HELLO WORLD'</code>.</p>",
          "<p>Excellent!!!</p>\n<p>One more exercise, and then you can relax. </p>\n<p>Write a program which prints <code>sentence</code> mockingly, e.g:</p>\n<pre><code>OnE MoRe eXeRcIsE, aNd tHeN YoU CaN ReLaX.\n</code></pre>\n<p>Every second character should be lowercased, the rest should be uppercase.</p>",
          "<p>Perfect! Take a moment to be proud of what you've achieved. Can you feel your brain growing?</p>"
        ]
      },
      {
        "title": "The Equality Operator",
        "step_texts": [
          "<p>There are several ways to obtain booleans without assigning them directly,\nwhich allows you to construct very useful <code>if</code> statements. In particular there\nare many <em>comparison operators</em> which compare the values of two expressions.\nThe most common is the equality operator which checks if two values are equal.\nIt's denoted by two equals signs: <code>==</code>. Try running this:</p>\n<pre><code>print(1 + 2 == 3)\nprint(4 + 5 == 6)\nprint('ab' + 'c' == 'a' + 'bc')\n</code></pre>",
          "<p>As you can see, if the values are equal, the equality expression evaluates to <code>True</code>,\notherwise it's <code>False</code>.</p>\n<p>Note the difference between the equality operator <code>==</code> and a single <code>=</code> which has different meanings,\nparticularly in assignment statements as you've seen them so far. What happens if you try\nremoving a single <code>=</code> from the previous program?</p>",
          "<p>Let's use <code>==</code> in an <code>if</code> statement. In this program, the <code>if</code> body runs only when <code>c</code> is the character <code>'s'</code>. See for yourself.</p>\n<pre><code>name = 'kesha'\nnew_name = ''\nfor c in name:\n    if c == 's':\n        c = '$'\n    new_name += c\n\nprint(new_name)\n</code></pre>",
          "<p>Now extend the program to also replace <code>e</code> with <code>3</code> and <code>a</code> with <code>@</code>.</p>",
          "<p>Well done!</p>"
        ]
      },
      {
        "title": "Introducing <code>elif</code>",
        "step_texts": [
          "<p>Quick biology lesson! Most of the cells in your body contain your full genetic code in DNA.\nThis consists of strands of molecular units called nucleobases which come in four varieties:\nAdenine, Cytosine, Guanine, and Thymine, or ACGT for short.\nSo part of a single strand might be something like:</p>\n<pre><code>AGTAGCGTCCTTAGTTACAGGATGGCTTAT...\n</code></pre>\n<p>This will be paired with another strand where A is replaced by T and vice versa,\nand C is replaced by G and vice versa, e.g:</p>\n<pre><code>TCATCGCAGGAATCAATGTCCTACCGAATA...\n</code></pre>\n<p>The two strands are 'zipped' together into the famous double helix structure,\njoined by the matching A-T and C-G pairs. These pairings are essential in copying DNA when\ncells divide and reproduce. The double helix is unzipped and the code is transcribed\ninto its opposite version to make the copy.</p>\n<p>We're going to repeat that process. Let's try the same kind of program we just wrote:</p>\n<pre><code>dna = 'AGTAGCGTC'\nopposite_dna = ''\nfor char in dna:\n    if char == 'A':\n        char = 'T'\n    if char == 'T':\n        char = 'A'\n    if char == 'G':\n        char = 'C'\n    if char == 'C':\n        char = 'G'\n    opposite_dna += char\n\nprint(opposite_dna)\n</code></pre>",
          "<p>Oh dear, that doesn't quite work. <code>T</code> is changed to <code>A</code> but <code>A</code> isn't changed to anything.\nCan you see why?</p>\n<p>When <code>char == 'A'</code>, then the body <code>char = 'T'</code> does indeed run. But that means that the following\ncondition <code>char == 'T'</code> also passes and so <code>char = 'A'</code> and we're back where we started.\nWe need to only change <code>char</code> from <code>T</code> to <code>A</code> if <code>char</code> wasn't already <code>A</code> to begin with,\nmeaning <code>char == 'A'</code> was <code>False</code>. We can do that with an <code>else</code>, like so:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelse:\n    if char == 'T':\n        char = 'A'\n</code></pre>\n<p>Now fix the program to replace all characters correctly.</p>",
          "<p>Brilliant! You have mimicked what your own cells are constantly doing.</p>\n<p>An <code>if</code> inside an <code>else</code> can be replaced by a single keyword <code>elif</code>. For example,\nthe previous code can be changed to this:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelif char == 'T':\n    char = 'A'\nelif char == 'G':\n    char = 'C'\nelif char == 'C':\n    char = 'G'\n</code></pre>",
          "<p>It's common to have a chain of <code>elif</code> clauses when you want exactly one of many\nbodies to run, like in this case. In general, code like this:</p>\n<pre><code>if X:\n    ...\nelse:\n    if Y:\n        ...\n    else:\n        if Z:\n            ...\n        else:\n            ...\n</code></pre>\n<p>can be rewritten as:</p>\n<pre><code>if X:\n    ...\nelif Y:\n    ...\nelif Z:\n    ...\nelse:\n    ...\n</code></pre>\n<p>which is both shorter and saves you from unpleasant nested indentation.\nThe difference is only cosmetic: once the computer runs this code, it can't\ntell the difference between the two versions.</p>\n<p>Note that <code>elif</code>(s) can optionally be followed by one final <code>else</code>. We didn't include one\nin our DNA example, but we could add one to alert us to any unexpected characters\nin the input, or change <code>elif char == 'C':</code> to <code>else:</code> if we were confident\nabout the input being valid.</p>"
        ]
      },
      {
        "title": "Other Comparison Operators",
        "step_texts": [
          "<p>The opposite of the equals operator <code>==</code> is the <em>not equals</em> operator <code>!=</code>. If you squint it sort of looks like \u2260. It evaluates to <code>True</code> when two values are...not equal. Try it for yourself in the shell.</p>",
          "<p>Here's a cute little program using <code>!=</code>:</p>\n<pre><code>sentence = \"The e key on my keyboard is broken\"\nnew_sentence = ''\nfor c in sentence:\n    if c != 'e':\n        new_sentence += c\nprint(new_sentence)\n</code></pre>",
          "<p>Other handy operators are <code>&lt;</code> (less than) and <code>&gt;</code> (greater than). For example, <code>a &lt; b</code> means \"<code>a</code> is less than <code>b</code>\". Try using one of these in the shell to compare two numbers.</p>",
          "<p>You can also use these operators to compare strings. If you arrange two strings in alphabetical order, the first one is 'less than' the second. See for yourself.</p>",
          "<p>Here's a practical example of <code>&lt;</code> in action for you to try:</p>\n<pre><code>percentage = 73\n\nif percentage &lt; 20:\n    grade = \"F\"\nelif percentage &lt; 40:\n    grade = \"D\"\nelif percentage &lt; 60:\n    grade = \"C\"\nelif percentage &lt; 80:\n    grade = \"B\"\nelse:\n    grade = \"A\"\n\nprint(grade)\n</code></pre>\n<p>Recall that <code>elif percentage &lt; 40</code> after <code>if percentage &lt; 20</code> means \"if the percentage wasn't less than 20 and also is less than 40\", so it will pass for all numbers from 20 to 39 inclusive. Similarly a 'C' is for percentages from 40 to 59, and an 'A' is for any number 80 and up.</p>",
          "<p>Now for an exercise: write a program that takes three variables <code>x1</code>, <code>x2</code>, and <code>x3</code>, and prints the value of the smallest one. So for:</p>\n<pre><code>x1 = 'Charlie'\nx2 = 'Alice'\nx3 = 'Bob'\n</code></pre>\n<p>it should print <code>Alice</code>.</p>",
          "<p>Marvelous!</p>\n<p>There are many ways this could be solved. Here's one solution:</p>\n<pre><code>if x1 &lt; x2:\n    if x1 &lt; x3:\n        first = x1\n    else:\n        first = x3\nelse:\n    if x2 &lt; x3:\n        first = x2\n    else:\n        first = x3\n\nprint(first)\n</code></pre>\n<p>Here's another:</p>\n<pre><code>first = x1\n\nif x2 &lt; first:\n    first = x2\n\nif x3 &lt; first:\n    first = x3\n\nprint(first)\n</code></pre>\n<p>These programs (and yours too) all work equally well with numbers and strings,\nbut not a mixture.</p>\n<p><code>&lt;</code> and <code>&gt;</code> evaluate to False if the compared values are equal. For example,\n3 is not less than 3, so <code>3 &lt; 3</code> and <code>3 &gt; 3</code> are both False.\nTo allow equal values, use <code>&lt;=</code> and <code>&gt;=</code>.\nAgain, if you squint, they look a bit like \u2264 and \u2265.\nNote that the <code>=</code> comes second - there are no such operators as <code>=&lt;</code> or <code>=&gt;</code>.\nTo remember this, read them out loud as \"less than or equal to\"\nand \"greater than or equal to\".</p>\n<p>In summary, the main comparison operators are <code>==</code>, <code>!=</code>, <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>, and <code>&gt;=</code>.\nIf you ever have doubts about what they do, play with them in the shell!</p>"
        ]
      },
      {
        "title": "Introducing Lists",
        "step_texts": [
          "<p>It's time to learn about a powerful new type of value called lists. Here's an example:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor word in words:\n    print(word)\n</code></pre>",
          "<p>A list is a <em>sequence</em> (an ordered collection/container) of any number of values.\nThe values are often referred to as <em>elements</em>.\nThey can be anything: numbers, strings, booleans, even lists! They can also be a mixture of types.</p>\n<p>To create a list directly, like above:</p>\n<ol>\n<li>Write some square brackets: <code>[]</code></li>\n<li>If you don't want an empty list, write some expressions inside to be the elements.</li>\n<li>Put commas (<code>,</code>) between elements to separate them.</li>\n</ol>\n<p>Here's another example of making a list:</p>\n<pre><code>x = 1\nthings = ['Hello', x, x + 3]\nprint(things)\n</code></pre>",
          "<p>As you saw above, lists are <em>iterable</em>, meaning you can iterate over them with a <code>for loop</code>.\nHere's a program that adds up all the numbers in a list:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9]\n\ntotal = 0\nfor number in numbers:\n    total += number\n\nprint(total)\n</code></pre>",
          "<p>Now modify the program so that it can add up a list of strings instead of numbers.\nFor example, given:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n</code></pre>\n<p>it should print:</p>\n<pre><code>Thisisalist\n</code></pre>",
          "<p>Optional bonus challenge: extend the program to insert a separator string <em>between</em> each word.\nFor example, given</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\nseparator = ' - '\n</code></pre>\n<p>it would output:</p>\n<pre><code>This - is - a - list\n</code></pre>\n<p>Lists and strings have a lot in common.\nFor example, you can add two lists to combine them together into a new list.\nYou can also create an empty list that has no elements.\nCheck for yourself:</p>\n<pre><code>numbers = [1, 2] + [3, 4]\nprint(numbers)\nnew_numbers = []\nnew_numbers += numbers\nnew_numbers += [5]\nprint(new_numbers)\n</code></pre>\n<p>With that knowledge, write a program which takes a list of numbers\nand prints a list where each number has been doubled. For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[6, 2, 8, 2, 10, 18, 4, 12, 10]\n</code></pre>",
          "<p>Great!</p>\n<p>When you want to add a single element to the end of a list, instead of:</p>\n<pre><code>some_list += [element]\n</code></pre>\n<p>it's actually more common to write:</p>\n<pre><code>some_list.append(element)\n</code></pre>\n<p>There isn't really a big difference between these, but <code>.append</code>\nwill be more familiar and readable to most people.</p>\n<p>Now use <code>.append</code> to write a program which prints a list containing only the numbers bigger than 5.</p>\n<p>For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[9, 6]\n</code></pre>",
          "<p>Fantastic! We're making great progress.</p>"
        ]
      },
      {
        "title": "Using <code>break</code> to end a loop early",
        "step_texts": [
          "<p>Exercise: write a program which takes a list and a value and checks\nif the list contains the value. For example, given:</p>\n<pre><code>things = ['This', 'is', 'a', 'list']\nthing_to_find = 'is'\n</code></pre>\n<p>it should print <code>True</code>, but for</p>\n<pre><code>thing_to_find = 'other'\n</code></pre>\n<p>it should print <code>False</code>.</p>",
          "<p>Nice!</p>\n<p>A typical solution looks something like this:</p>\n<pre><code>found = False\nfor thing in things:\n    if thing == thing_to_find:\n        found = True\n\nprint(found)\n</code></pre>\n<p>Your solution is probably similar. It's fine, but it's a bit inefficient.\nThat's because it'll loop over the entire list even if it finds the element at the beginning.\nYou can stop any loop using a <code>break</code> statement, like so:</p>\n<pre><code>for thing in things:\n    if thing == thing_to_find:\n        found = True\n        break\n</code></pre>\n<p>This is just as correct but skips unnecessary iterations and checks once it finds the element.\nYou can use snoop to see the difference.</p>"
        ]
      },
      {
        "title": "Getting Elements at a Position",
        "step_texts": [
          "<p>Looping is great, but often you just want to retrieve a single element from the list at a known position.\nHere's how:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nprint(words[0])\nprint(words[1])\nprint(words[2])\nprint(words[3])\n</code></pre>",
          "<p>In general, you can get the element at the position <code>i</code> with <code>words[i]</code>. The operation is called <em>subscripting</em> or <em>indexing</em>, and the position is called the <em>index</em>.</p>\n<p>You've probably noticed that the first index is 0, not 1. In programming, counting starts at 0. It seems weird, but that's how most programming languages do it, and it's generally agreed to be better.</p>\n<p>This also means that the last index in this list of 4 elements is 3. What happens if you try getting an index greater than that?</p>",
          "<p>There you go. <code>words[4]</code> and beyond don't exist, so trying that will give you an error.</p>\n<p>By the way, you can get the number of elements in a list (commonly called the <em>length</em>) using <code>len(words)</code>.\nThat means that the last valid index of the list is <code>len(words) - 1</code>, so the last element is <code>words[len(words) - 1]</code>. Try these for yourself.</p>\n<p>So in general, the valid indices are:</p>\n<pre><code>[0, 1, 2, ..., len(words) - 2, len(words) - 1]\n</code></pre>\n<p>There's a handy built in function to give you these values, called <code>range</code>:</p>\n<pre><code>for i in range(10):\n    print(i)\n</code></pre>",
          "<p><code>range(n)</code> is similar to the list <code>[0, 1, 2, ..., n - 2, n - 1]</code>.\nThis gives us an alternative way to loop over a list:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor index in range(len(words)):\n    print(index)\n    print(words[index])\n</code></pre>",
          "<p>Let's get some exercise! Given a list <code>things</code> and a value <code>to_find</code>,\nprint the first index of <code>to_find</code> in the list, i.e. the lowest number <code>i</code> such that\n<code>things[i]</code> is <code>to_find</code>. For example, for</p>\n<pre><code>things = ['on', 'the', 'way', 'to', 'the', 'store']\nto_find = 'the'\n</code></pre>\n<p>your program should print <code>1</code>.</p>\n<p>You can assume that <code>to_find</code> appears at least once.</p>",
          "<p>Nice!</p>\n<p>By the way, indexing and <code>len()</code> also work on strings. Try them out in the shell.</p>\n<p>Here's another exercise. Given two strings of equal length, e.g:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"World\"\n</code></pre>\n<p>print them vertically side by side, with a space between each character:</p>\n<pre><code>H W\ne o\nl r\nl l\no d\n</code></pre>",
          "<p>Incredible!</p>\n<p>Your solution probably looks something like this:</p>\n<pre><code>for i in range(len(string1)):\n    char1 = string1[i]\n    char2 = string2[i]\n    print(char1 + ' ' + char2)\n</code></pre>\n<p>This doesn't work so well if the strings have different lengths.\nIn fact, it goes wrong in different ways depending on whether <code>string1</code> or <code>string2</code> is longer.\nYour next challenge is to fix this problem by filling in 'missing' characters with spaces.</p>\n<p>For example, for:</p>\n<pre><code>string1 = \"Goodbye\"\nstring2 = \"World\"\n</code></pre>\n<p>output:</p>\n<pre><code>G W\no o\no r\nd l\nb d\ny  \ne\n</code></pre>\n<p>and for:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"Elizabeth\"\n</code></pre>\n<p>output:</p>\n<pre><code>H E\ne l\nl i\nl z\no a\n  b\n  e\n  t\n  h\n</code></pre>",
          "<p>Magnificent! Take a break, you've earned it!</p>"
        ]
      },
      {
        "title": "Terminology: Calling functions and methods",
        "step_texts": [
          "<p>It's time to expand your vocabulary some more.</p>\n<p><code>print</code> and <code>len</code> are <strong><em>functions</em></strong>. See for yourself:</p>\n<pre><code>print(len)\nprint(print)\n</code></pre>",
          "<p>An expression like <code>len(things)</code> or <code>print(things)</code> is a function <strong><em>call</em></strong> - when you write that, you are <strong><em>calling</em></strong> the function <code>len</code> or <code>print</code>. The fact that this is possible means that functions are <strong><em>callable</em></strong>:</p>\n<pre><code>print(callable(len))\n</code></pre>",
          "<p>Most things are not callable, so trying to call them will give you an error:</p>\n<pre><code>f = 'a string'\nprint(callable(f))\nf()\n</code></pre>",
          "<p>In the call <code>len(things)</code>, <code>things</code> is an <strong><em>argument</em></strong>. Sometimes you will also see the word <strong><em>parameter</em></strong>, which means basically the same thing as argument. It's a bit like you're giving the argument to the function - specifically we say that the argument <code>things</code> is <em>passed</em> to <code>len</code>, and <code>len</code> <em>accepts</em> or <em>receives</em> the argument.</p>\n<p><code>len(things)</code> will evaluate to a number such as 3, in which case we say that <code>len</code> <strong><em>returned</em></strong> 3.</p>\n<p>All calls have to return something...even if it's nothing. For example, <code>print</code>'s job is to display something on screen, not to return a useful value. So it returns something useless instead:</p>\n<pre><code>things = [1, 2, 3]\nlength = len(things)\nprinted = print(length)\nprint(printed)\n</code></pre>",
          "<p><code>None</code> is a special 'null' value which can't do anything interesting. It's a common placeholder that represents the lack of a real useful value. Functions that don't want to return anything return <code>None</code> by default. If you see an error message about <code>None</code> or <code>NoneType</code>, it often means you assigned the wrong thing to a variable:</p>\n<pre><code>things = print([1, 2, 3])\nlength = len(things)\n</code></pre>",
          "<p>A <strong><em>method</em></strong> is a function which belongs to a type, and can be called on all values of that type using <code>.</code>. For example, <code>upper</code> and <code>lower</code> are methods of strings, which are called with e.g. <code>word.upper()</code>:</p>\n<pre><code>word = 'Hello'\nprint(word.upper)\nprint(word.upper())\n</code></pre>",
          "<p>Another example is that <code>append</code> is a method of lists. But you can't use <code>.upper</code> on a list or <code>.append</code> on a string:</p>\n<pre><code>word = 'Hello'\nword.append('!')\n</code></pre>",
          "<p>The word 'attribute' in the error message refers to the use of <code>.</code> - the error actually comes just from <code>word.append</code>, without even a call.</p>"
        ]
      },
      {
        "title": "Functions And Methods For Lists",
        "step_texts": [
          "<p>Let's review how to work with lists. Suppose we have a list <code>nums = [1, 2, 3]</code>. You can use:</p>\n<ul>\n<li><strong><code>append</code></strong>: Add an element to the end of the list. <code>nums.append(4)</code> changes the list to <code>[1, 2, 3, 4]</code>.</li>\n<li><strong><code>len</code></strong>: Returns the number of elements. <code>len(nums)</code> is <code>3</code>.</li>\n<li><strong><code>range</code></strong>: <code>range(n)</code> is an object similar to the list of numbers from 0 to <code>n - 1</code>. In particular, <code>range(len(nums))</code> is like <code>[0, 1, 2]</code>.</li>\n<li><strong><code>subscripting</code></strong>: Get a value at an index. <code>nums[0]</code> is 1, <code>nums[1]</code> is 2, <code>nums[2]</code> is 3.</li>\n<li><strong><code>+</code></strong>: Concatenates lists. <code>nums + [4, 5]</code> is <code>[1, 2, 3, 4, 5]</code>.</li>\n</ul>\n<p>Here's some new things. Try them out in the shell.</p>\n<ul>\n<li><strong><code>subscript assignment</code></strong>: Set a value at an index. <code>nums[0] = 9</code> changes the list to <code>[9, 2, 3]</code>.</li>\n<li><strong><code>join</code></strong>: Add a list of strings with a separator in between. This is a method of strings (the separator) which takes an iterable of strings as an argument. <code>'--'.join(['apples', 'oranges', 'bananas'])</code> returns <code>'apples--oranges--bananas'</code>. You can also use an empty string if you don't want a separator, e.g. <code>''.join(['apples', 'oranges', 'bananas'])</code> returns <code>'applesorangesbananas'</code>. </li>\n<li><strong><code>sum</code></strong>: Add a list of numbers. <code>sum(nums)</code> is 6.</li>\n<li><strong><code>in</code></strong>: A comparison operator that checks if a value is in a list. <code>2 in nums</code> is <code>True</code>, but <code>4 in nums</code> is <code>False</code>.</li>\n<li><strong><code>index</code></strong>: Returns the first index of a value in a list. <code>[7, 8, 9, 8].index(8)</code> is 1. Raises an error if the value isn't there.</li>\n</ul>\n<p>You may recognise some of these from your exercises. I assure you that those exercises were not pointless, as you've now learned valuable fundamental skills. For example, you can use <code>in</code> to check if a list contains 5, but there's no similarly easy way to check for a number bigger than 5.</p>\n<p>It's useful to know these functions, but it's not easy to learn them all, and there's many more. A more important skill is being able to look things up. For example, here are some typical ways you might Google the above functions if you forgot their names:</p>\n<ul>\n<li><code>append</code><ul>\n<li>python add element to list</li>\n<li>python add item at end of list</li>\n</ul>\n</li>\n<li><code>len</code><ul>\n<li>python size of list</li>\n<li>python number of elements in list</li>\n<li>python how many characters in string</li>\n</ul>\n</li>\n<li><code>join</code><ul>\n<li>python combine list of strings with separator</li>\n<li>python add together list of strings with string in between</li>\n</ul>\n</li>\n<li><code>sum</code><ul>\n<li>python add list of numbers</li>\n<li>python total of numbers</li>\n</ul>\n</li>\n<li><code>in</code><ul>\n<li>python check if list contains value</li>\n<li>python test if list has element</li>\n</ul>\n</li>\n<li><code>index</code><ul>\n<li>python get position of element</li>\n<li>python get index of value</li>\n</ul>\n</li>\n</ul>\n<p>Let's practice this skill now. Find a function/method that returns the value in a list which is bigger than any other value. For example, given the list <code>[21, 55, 4, 91, 62, 49]</code>, it will return <code>91</code>. You should write the answer in the shell as a single small expression. For example, if you were looking for the function <code>sum</code>, you could write <code>sum([21, 55, 4, 91, 62, 49])</code>. Don't solve this manually with a loop.</p>",
          "<p>Good find! Let's do one more. If you have a list:</p>\n<pre><code>nums = [1, 2, 3, 4, 5]\n</code></pre>\n<p>You could write <code>nums.append(9)</code> and <code>nums</code> would change to:</p>\n<pre><code>[1, 2, 3, 4, 5, 9]\n</code></pre>\n<p>But suppose you don't want the 9 to be at the end, you want it to go between the second and third elements:</p>\n<pre><code>[1, 2, 9, 3, 4, 5]\n</code></pre>\n<p>Call the right function/method in the shell to do that.</p>",
          "<p>Perfect!</p>\n<p>It can also be useful to Google things like \"python list tutorial\", e.g. if:</p>\n<ul>\n<li>Googling a specific method has failed so you want to find it manually.</li>\n<li>You're still confused about lists after this course.</li>\n<li>It's been a while since you learned about lists and you need a reminder.</li>\n<li>You're struggling to solve a problem with lists and you need to go back to basics and strengthen your foundations.</li>\n</ul>\n<p>There are also ways to find information without any googling. Try <code>dir([])</code> in the shell.</p>",
          "<p><code>dir()</code> returns a list of the argument's attributes, which are mostly methods. Many will start with <code>__</code> which you can ignore for now - scroll to the end of the list and you'll see some familiar methods.</p>\n<p>Here are a few more useful functions/methods. Suppose <code>nums = [28, 99, 10, 81, 59, 64]</code></p>\n<ul>\n<li><strong><code>sorted</code></strong>: Takes an iterable and returns a list of the elements in order. <code>sorted(nums)</code> returns <code>[10, 28, 59, 64, 81, 99]</code>.</li>\n<li><strong><code>pop</code></strong>: Removes and returns an element at a given index. <code>nums.pop(3)</code> removes <code>nums[3]</code> (<code>81</code>) from the list and returns it. Without an argument, i.e. just <code>nums.pop()</code>, it will remove and return the last element.</li>\n<li><strong><code>remove</code></strong>: Removes the first occurrence of the given element. <code>nums.remove(10)</code> will leave <code>nums</code> as <code>[28, 99, 81, 59, 64]</code>. Raises an error if the value doesn't exist. Equivalent to <code>nums.pop(nums.index(10))</code>.</li>\n<li><strong><code>count</code></strong>: Returns the number of times the argument appears in the list. <code>[1, 2, 3, 2, 7, 2, 5].count(2)</code> is 3.</li>\n</ul>\n<p>You've already seen that <code>len</code> and subscripting work with strings, a bit as if strings are lists of characters. Strings also support some of the new methods we've learned, not just for characters but for any substring. For example:</p>\n<ul>\n<li><code>'the' in 'feed the dog and the cat'</code> is <code>True</code></li>\n<li><code>'feed the dog and the cat'.count('the')</code> is 2</li>\n<li><code>'feed the dog and the cat'.index('the')</code> is 5</li>\n</ul>\n<p>Note that in most cases, methods which modify a list in place (<code>append</code>, <code>insert</code>, <code>remove</code>) merely return <code>None</code>, while the remaining functions/methods return a new useful value without changing the original argument. The only exception is the <code>pop</code> method.</p>\n<p>Modifying a value directly is called <em>mutation</em> - types of values which can be mutated are <em>mutable</em>, while those that can't are <em>immutable</em>. Strings are immutable - they don't have any methods like <code>append</code> or even subscript assignment. You simply can't change a string - you can only create new strings and use those instead. That means that this is a useless statement on its own:</p>\n<pre><code>word.upper()\n</code></pre>\n<p>The string referred to by <code>word</code> isn't modified, instead <code>word.upper()</code> returned a new string which was immediately discarded. If you want to change the value that <code>word</code> refers to, you have to assign a new value to the variable:</p>\n<pre><code>word = word.upper()\n</code></pre>\n<p>Or you can use <code>word.upper()</code> immediately in a larger expression, e.g.</p>\n<pre><code>if word.lower() == 'yes':\n</code></pre>"
        ]
      },
      {
        "title": "Understanding Programs With Python Tutor",
        "step_texts": [
          "<p>It's time to learn about another tool to explore programs. Put some code in the editor and then click the new \"Python Tutor\" button. Here's some example code if you want:</p>\n<pre><code>all_numbers = [2, 4, 8, 1, 9, 7]\n\nsmall_numbers = []\nbig_numbers = []\n\nfor number in all_numbers:\n    if number &lt;= 5:\n        small_numbers.append(number)\n    else:\n        big_numbers.append(number)\n\nprint(small_numbers)\nprint(big_numbers)\n</code></pre>\n<p>The button will open a new tab with a visualisation from <a href=\"http://pythontutor.com\">pythontutor.com</a>.\nThere you can navigate through the program step by step with the \"Prev\" or \"Next\" buttons, or drag\nthe slider left or right. You can also see the values of variables on the right.</p>"
        ]
      },
      {
        "title": "<code>==</code> vs <code>is</code>",
        "step_texts": [
          "<p>It's time to learn some technical details that are often misunderstood and lead to errors.\nRun this program:</p>\n<pre><code>list1 = [1, 2, 3]\nlist2 = [1, 2, 3]\n\nprint(list1)\nprint(list2)\nprint(list1 == list2)\n\nprint(list1 is list2)\n\nlist1.append(4)\n\nprint(list1)\nprint(list2)\n</code></pre>",
          "<p>This program is quite straightforward and mostly consists of things you're familiar with.\nWe create two variables which refer to lists.\nThe lists have the same elements, so they are equal: <code>list1 == list2</code> is <code>True</code>.</p>\n<p>But then there's a new comparison operator: <code>is</code>. Here <code>list1 is list2</code> is <code>False</code>.\nThat means that regardless of the two lists being equal,\nthey are still two separate, distinct, individual lists.\nAs a result, when you append 4 to <code>list1</code>, only <code>list1</code> changes.</p>\n<p>Now change <code>list2 = [1, 2, 3]</code> to <code>list2 = list1</code> and see what difference it makes.</p>",
          "<p>Now <code>list1 is list2</code> is <code>True</code>, because <em>there is only one list</em>, and the two variables\n<code>list1</code> and <code>list2</code> both refer to that same list. <code>list1.append(4)</code> appends to the one list\nand the result can be seen in both <code>print(list1)</code> and <code>print(list2)</code> because both lines\nare now just different ways of printing the same list.</p>\n<p>I recommend running both versions with Python Tutor to see how it visualises the difference.\nIn the second case, the two variables both have arrows pointing to a single list object.</p>\n<p><code>list2 = list1</code> doesn't create an eternal link between the variables. If you assign a new value\nto <em>either</em> of the variables, e.g. <code>list1 = [7, 8, 9]</code>, the other variable will be unaffected\nand will still point to the original list.</p>\n<p>Basically, an assignment like:</p>\n<pre><code>list2 = &lt;expression&gt;\n</code></pre>\n<p>means 'make the variable <code>list2</code> refer to whatever <code>&lt;expression&gt;</code> evaluates to'.\nIt doesn't make a copy of that value, which is how both variables can end up pointing to the same list.\nBut as we've learned before, <code>list2</code> doesn't remember <code>&lt;expression&gt;</code>, only the value.\nIt doesn't know about other variables.</p>\n<p>You can copy a list with the <code>copy</code> method:</p>\n<pre><code>list2 = list1.copy()\n</code></pre>\n<p>This will make the program behave like the first version again.</p>\n<p>If you come across this kind of problem and you're still having trouble understanding this stuff, read the essay <a href=\"https://nedbatchelder.com/text/names.html\">Facts and myths about Python names and values</a>.</p>"
        ]
      },
      {
        "title": "Modifying While Iterating",
        "step_texts": [
          "<p>Consider this program. It loops through a numbers and removes the ones smaller than 10. Or at least, it tries to. I recommend running it with Python Tutor.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor i in range(len(numbers)):\n    number = numbers[i]\n    if number &lt;= 10:\n        numbers.pop(i)\nprint(numbers)\n</code></pre>\n<p>(remember that <code>numbers.pop(i)</code> removes the element from <code>numbers</code> at index <code>i</code>)</p>\n<p>As it runs, it clearly skips even looking at 7 or 3 and doesn't remove them, and at the end it fails when it tries to access an index that's too high. Can you see why this happens?</p>\n<p>The index variable <code>i</code> runs through the usual values 0, 1, 2, ... as it's supposed to, but as the list changes those are no longer the positions we want. For example in the first iteration <code>i</code> is 0 and <code>number</code> is 10, which gets removed. This shifts the rest of the numbers left one position, so now 7 is in position 0. But then in the next iteration <code>i</code> is 1, and <code>numbers[i]</code> is 8. 7 got skipped. </p>\n<p>We could try writing the program to use <code>remove</code> instead of <code>pop</code> so we don't have to use indices. It even looks nicer this way.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor number in numbers:\n    if number &lt;= 10:\n        numbers.remove(number)\nprint(numbers)\n</code></pre>\n<p>But it turns out this does the same thing, for the same reason. Iterating over a list still goes through the indices under the hood.</p>\n<p>The lesson here is to <strong><em>never modify something while you iterate over it</em></strong>. Keep mutation and looping separate.</p>\n<p>The good news is that there are many ways to solve this. You can instead just loop over a copy, as in:</p>\n<pre><code>for number in numbers.copy():\n</code></pre>\n<p>Now the list being modified and the list being itererated over are separate objects, even if they start out with equal contents.</p>\n<p>Similarly, you could loop over the original and modify a copy:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = numbers.copy()\n\nfor number in numbers:\n    if number &lt;= 10:\n        big_numbers.remove(number)\nprint(big_numbers)\n</code></pre>\n<p>Or you could build up a new list from scratch. In this case, we've already done a similar thing in an exercise:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = []\n\nfor number in numbers:\n    if number &gt; 10:\n        big_numbers.append(number)\nprint(big_numbers)\n</code></pre>"
        ]
      },
      {
        "title": "Introducing Nested Loops",
        "step_texts": [
          "<p>You've seen that the indented body of an <code>if</code> or a loop can contain any kind of statement, including more <code>if</code> statements and loops. In particular a loop can contain another loop. Here's an example:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(number)\n</code></pre>",
          "<p>This is called a <em>nested loop</em>. Nothing about it is really new, it's just worth understanding properly because it can be very useful for writing interesting programs.</p>\n<p>Let's add a line to separate sections of the output:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(number)\n    print('---')\n</code></pre>",
          "<p>Make sure you fully grasp what's going on. <code>print(letter)</code> and <code>print('---')</code> each run 3 times, because their indentation puts them in the <em>outer loop</em>. <code>print(number)</code> is called 3 \u00d7 4 = 12 times, because it's in the <em>inner loop</em> <code>for number in range(4):</code> which has 4 iterations but is itself in the outer loop so it runs 3 times.</p>\n<p>One more tweak:</p>\n<pre><code>for letter in \"ABC\":\n    print(letter)\n    for number in range(4):\n        print(letter, number)\n    print('---')\n</code></pre>",
          "<p><code>print(letter, number)</code> gives <code>print</code> two arguments. <code>print</code> can take any number of arguments, and it will output them all on the same line, with spaces in between. If you try using <code>print(letter + ' ' + number)</code> instead you'll get an error, because you can't add strings and numbers. We'll come back to that later.</p>\n<p>Let's put this to use! Suppose you're a teacher and you need to print out all the multiplication tables from 1 to 12 for your students. You don't want to write them manually, but you can write a program to do it for you! Your program output should look like this including the lines of dashes:</p>\n<pre><code>1 x 1 = 1\n1 x 2 = 2\n1 x 3 = 3\n1 x 4 = 4\n1 x 5 = 5\n1 x 6 = 6\n1 x 7 = 7\n1 x 8 = 8\n1 x 9 = 9\n1 x 10 = 10\n1 x 11 = 11\n1 x 12 = 12\n----------\n2 x 1 = 2\n2 x 2 = 4\n2 x 3 = 6\n2 x 4 = 8\n2 x 5 = 10\n2 x 6 = 12\n2 x 7 = 14\n2 x 8 = 16\n2 x 9 = 18\n2 x 10 = 20\n2 x 11 = 22\n2 x 12 = 24\n----------\n3 x 1 = 3\n3 x 2 = 6\n3 x 3 = 9\n(you get the idea...)\n11 x 10 = 110\n11 x 11 = 121\n11 x 12 = 132\n----------\n12 x 1 = 12\n12 x 2 = 24\n12 x 3 = 36\n12 x 4 = 48\n12 x 5 = 60\n12 x 6 = 72\n12 x 7 = 84\n12 x 8 = 96\n12 x 9 = 108\n12 x 10 = 120\n12 x 11 = 132\n12 x 12 = 144\n----------\n</code></pre>",
          "<p>Perfect!</p>\n<p>Next exercise: you're organising a tournament for a game, such as chess or tennis. You have a list of player names:</p>\n<pre><code>players = [\"Alice\", \"Bob\", \"Charlie\"]\n</code></pre>\n<p>Every player is going to play against every other player twice: once where they get the advantage (e.g. by moving or serving first) and once not. Print out all the match combinations like this:</p>\n<pre><code>Alice vs Bob\nAlice vs Charlie\nBob vs Alice\nBob vs Charlie\nCharlie vs Alice\nCharlie vs Bob\n</code></pre>\n<p>Note that \"Alice vs Bob\" and \"Bob vs Alice\" are both in the list, but there's no \"Alice vs Alice\" - we don't want anyone playing with themselves.</p>",
          "<p>Well done! If you'd like a bonus challenge, remove the repetition and only output each pair of players once, e.g:</p>\n<pre><code>Alice vs Bob\nAlice vs Charlie\nBob vs Charlie\n</code></pre>\n<p>For your next exercise, you need to crack a password. You know that it's exactly four letters long and that only a few letters are possible, which you've written down:</p>\n<pre><code>letters = \"ABCD\"\n</code></pre>\n<p>You need to print out all possible passwords:</p>\n<pre><code>AAAA\nAAAB\nAAAC\nAAAD\nAABA\nAABB\n...skipping a few...\nDDDA\nDDDB\nDDDC\nDDDD\n</code></pre>",
          "<p>Wow, you're basically a hacker now!</p>\n<p>One more exercise. Given a size:</p>\n<pre><code>size = 5\n</code></pre>\n<p>Print out an 'upside down' triangle made of the letter <code>O</code> whose sides are as long as the given size, e.g:</p>\n<pre><code>OOOOO\nOOOO\nOOO\nOO\nO\n</code></pre>",
          "<p>Wow, you're an artist too!</p>"
        ]
      }
    ],
    "user": {
      "email": "[email protected]",
      "developerMode": true
    },
    "processing": false,
    "numHints": 0,
    "editorContent": "",
    "messages": [],
    "pastMessages": [],
    "showingPageIndex": 29,
    "requestingSolution": false,
    "solution": {
      "tokens": [],
      "maskedIndices": [],
      "mask": []
    }
  }
}

{
  "rpc": {
    "loading": [],
    "error": null
  },
  "book": {
    "server": {
      "hints": [
        "<p>The code should be almost exactly the same, just make a couple of small changes.</p>",
        "<p>Make sure that the code inside <code>if include:</code> runs at the beginning of the loop, in the first iteration.</p>",
        "<p>That means <code>include</code> should be <code>True</code> at that point.</p>",
        "<p>Make sure that the code inside <code>if include:</code> <em>doesn't</em> run after the first iteration.</p>",
        "<p>That means <code>include</code> should be <code>False</code> after the first iteration.</p>"
      ],
      "page_index": 16,
      "showBirdseye": true,
      "showEditor": true,
      "showPythonTutor": false,
      "showSnoop": true,
      "step_index": 2
    },
    "pages": [
      {
        "step_texts": [
          "<p>At the bottom right of the screen is the <em>shell</em>. This is a place for running small bits of Python code. Just type in some code, press enter, and it'll run! Try it now:</p>\n<ol>\n<li>Click anywhere on the shell (the black area).</li>\n<li>Type <code>1+2</code></li>\n<li>Press the Enter key on your keyboard.</li>\n</ol>",
          "<p>Great! Python evaluated <code>1+2</code> and got the result <code>3</code>, so the shell displays that.</p>\n<p>The shell is probably your most important tool for learning Python, and you should spend lots of time experimenting and exploring in it. Be curious! Constantly ask yourself \"What would happen if I ran X?\" and then immediately answer that question by running it! Never be scared to try something out - if you get something wrong, nothing bad will happen.</p>\n<p>Try doing some more calculations now. You can multiply numbers with <code>*</code>, divide with <code>/</code>, and subtract with <code>-</code>. You can also use parentheses, i.e. <code>(</code> and <code>)</code>.</p>",
          "<p>Excellent! Keep experimenting. When you're ready, click 'Next' to continue.</p>"
        ],
        "title": "Introducing The Shell"
      },
      {
        "step_texts": [
          "<p>Here's a tip: often you will want to re-run a previously entered bit of code, or a slightly modified version of it. You can copy and paste, but that's tedious and gets in the way of experimenting. A better method is to press the Up Arrow key on your keyboard. This will insert the previous line of code into the shell. Keep pressing it to go further back in your history, and if you go too far, press the Down Arrow key to go the other way. Try using it now.</p>"
        ],
        "title": "Navigating Shell History"
      },
      {
        "step_texts": [
          "<p>Python lets you do much more than calculate. In fact, we're not going to touch numbers or maths for a while. Instead, we're going to look at <em>strings</em>. Strings are essentially snippets of text. For example, enter the following into the shell, quotes (<code>'</code>) included:</p>\n<pre><code>'hello'\n</code></pre>",
          "<p>The shell simply gives the same thing back because there's nothing to further to calculate. <code>'hello'</code> is simply equal to <code>'hello'</code>.</p>\n<p>A string is a sequence of characters. A character is a single symbol such as a letter, number, punctuation, space, etc. In this case the string contains the 5 characters <code>hello</code>. The quotes are not part of the string - they are there to tell both humans and computers that this is a string consisting of whatever characters are between the quotes.</p>"
        ],
        "title": "Introducing Strings"
      },
      {
        "step_texts": [
          "<p>Strings can be added together using <code>+</code>, although this means something very different from adding numbers. For example, try:</p>\n<pre><code>'hello' + 'world'\n</code></pre>",
          "<p>You can see that <code>+</code> combines or joins two strings together end to end. Technically, this is called concatenation.</p>\n<p>Here's an exercise: change the previous code slightly so that the result is the string <code>'hello world'</code>, i.e. with a space between the words.</p>\n<p>By the way, if you get stuck, you can click the lightbulb icon in the bottom right for a hint.</p>",
          "<p>Well done! Any of the following are valid solutions:</p>\n<pre><code>'hello ' + 'world'\n'hello' + ' world'\n'hello' + ' ' + 'world'\n</code></pre>"
        ],
        "title": "Adding Strings"
      },
      {
        "step_texts": [
          "<p>To make interesting programs, we can't always manipulate the same values. We need a way to refer to values that are unknown ahead of time and can change - values that can vary. These are called <em>variables</em>.</p>\n<p>Run this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>",
          "<p>This creates a variable with the name <code>word</code> that refers to the string value <code>'Hello'</code>.</p>\n<p>Check now that this is true by simply running <code>word</code> in the shell by itself.</p>",
          "<p>Good. For comparison, run <code>'word'</code> in the shell by itself, with the quotes.</p>",
          "<p>As you can see, the quotes make all the difference. <code>'word'</code> is literally just <code>'word'</code>, hence it's technically called a <em>string literal</em>. On the other hand, <code>word</code> is a variable, whose value may be anything.</p>\n<p>Similarly, <code>'sunshine'</code> is <code>'sunshine'</code>, but what's <code>sunshine</code> without quotes?</p>",
          "<p>The answer is that <code>sunshine</code> looks like a variable, so Python tries to look up its value, but since we never defined a variable with that name we get an error.</p>"
        ],
        "title": "Introducing Variables"
      },
      {
        "step_texts": [
          "<p>Previously we made a variable called <code>word</code> with the value <code>'Hello'</code> with this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>\n<p>Now make a variable called <code>name</code> whose value is another string. The string can be anything...how about your name?</p>",
          "<p>You can use variables in calculations just like you would use literals. For example, try:</p>\n<pre><code>'Hello ' + name\n</code></pre>",
          "<p>Or you can just add variables together. Try:</p>\n<pre><code>word + name\n</code></pre>",
          "<p>Oops...that doesn't look nice. Can you modify the code above so that there's a space between the word and the name?</p>",
          "<p>Perfect!</p>\n<p>Variables can also change their values over time. Right now <code>word</code> has the value <code>'Hello'</code>. You can change its value in the same way that you set it for the first time. Run this:</p>\n<pre><code>word = 'Goodbye'\n</code></pre>",
          "<p>Now observe the effect of this change by running <code>word + ' ' + name</code> again.</p>",
          "<p>Those quotes around strings are getting annoying. Try running this:</p>\n<pre><code>print(word + ' ' + name)\n</code></pre>",
          "<p>Hooray! No more quotes! We'll break down what's happening in this code later. For now just know that <code>print(&lt;something&gt;)</code> displays <code>&lt;something&gt;</code> in the shell. In particular it displays the actual content of strings that we usually care about, instead of a representation of strings that's suitable for code which has things like quotes. The word <code>print</code> here has nothing to do with putting ink on paper.</p>"
        ],
        "title": "Using Variables"
      },
      {
        "step_texts": [
          "<p>It's time to stop doing everything in the shell. In the top right you can see the <em>editor</em>. This is a place where you can write and run longer programs. The shell is great and you should keep using it to explore, but the editor is where real programs live.</p>\n<p>Copy the program below into the editor, then click the 'Run' button:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nprint(word + ' ' + name)\nword = 'Goodbye'\nprint(word + ' ' + name)\n</code></pre>",
          "<p>Congratulations, you have run your first actual program!</p>\n<p>Take some time to understand this program. Python runs each line one at a time from top to bottom. You should try simulating this process in your head - think about what each line does. See how the value of <code>word</code> was changed and what effect this had. Note that when <code>print</code> is used multiple times, each thing (<code>Hello World</code> and <code>Goodbye World</code> in this case) is printed on its own line.</p>\n<p>Some things to note about programs in the editor:</p>\n<ol>\n<li>The program runs in the shell, meaning that the variables defined in the program now exist in the shell with the last values they had in the program. This lets you explore in the shell after the program completes. For example, <code>name</code> now has the value <code>'World'</code> in the shell.</li>\n<li>Programs run in isolation - they don't depend on any previously defined variables. The shell is reset and all previous variables are cleared. So even though <code>word</code> currently exists in the shell, if you delete the first line of the program and run it again, you'll get an error about <code>word</code> being undefined.</li>\n<li>If you enter code in the shell and it has a value, that value will automatically be displayed. That doesn't happen for programs in the editor - you have to print values. If you remove <code>print()</code> from the program, changing the two lines to just <code>word + ' ' + name</code>, nothing will be displayed.</li>\n</ol>\n<p>I recommend that you check all of these things for yourself.</p>"
        ],
        "title": "Writing Programs"
      },
      {
        "step_texts": [
          "<p>Often you will use variables to store the results of calculations. This will help to build more complex programs. For example, try this program:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nsentence = word + ' ' + name\nprint(sentence)\n</code></pre>",
          "<p>Now <code>sentence</code> has the value <code>'Hello World'</code> which can be used multiple times. Note that it will continue to have this value until it is directly reassigned, e.g. with another statement like <code>sentence = &lt;something&gt;</code>. For example, add these two lines to the end of the program:</p>\n<pre><code>word = 'Goodbye'\nprint(sentence)\n</code></pre>",
          "<p>Unlike a spreadsheet where formulas update automatically, a variable like <code>sentence</code> doesn't remember how it was calculated and won't change if the underlying values <code>word</code> or <code>name</code> are changed.</p>"
        ],
        "title": "Storing Calculations In Variables"
      },
      {
        "step_texts": [
          "<p>Good news! You've made it past the boring basics. We can start to write some interesting programs and have a bit of fun. One of the most powerful concepts in programming is the <em>loop</em>, which lets you repeat the same code over and over. Python has two kinds of loop: <code>for</code> loops and <code>while</code> loops. Here is an example of a for loop, try running this program:</p>\n<pre><code>name = 'World'\nfor character in name: print(character)\n</code></pre>",
          "<p>You can read the code almost like normal English:</p>\n<blockquote>\n<p>For each character in the string <code>name</code>, print that character.</p>\n</blockquote>\n<p>Each character is just a normal string. <code>character</code> is a normal variable that is given a new value before the code after the <code>:</code> runs. So the code above is equivalent to:</p>\n<pre><code>name = 'World'\n\ncharacter = 'W'\nprint(character)\n\ncharacter = 'o'\nprint(character)\n\ncharacter = 'r'\nprint(character)\n\ncharacter = 'l'\nprint(character)\n\ncharacter = 'd'\nprint(character)\n</code></pre>\n<p>Note that we could use a different variable name, <code>character</code> just makes it clearer.</p>\n<p>A for loop generally follows this structure:</p>\n<pre><code>for &lt;variable&gt; in &lt;collection&gt;: &lt;code to repeat&gt;\n</code></pre>\n<p>The <code>for</code>, <code>in</code>, and <code>:</code> are all essential.</p>"
        ],
        "title": "Introducing For Loops"
      },
      {
        "step_texts": [
          "<p>This example loop:</p>\n<pre><code>for character in name: print(character)\n</code></pre>\n<p>works, but actually it would usually (and should) be written like this:</p>\n<pre><code>for character in name:\n    print(character)\n</code></pre>\n<p>Specifically, the code to be repeated (known as the <em>body</em>) starts on a new line after the colon (<code>:</code>), and it must be <em>indented</em>, i.e. have some spaces before it. The code below without indentation is invalid, run it to see for yourself:</p>\n<pre><code>for character in name:\nprint(character)\n</code></pre>",
          "<p>The spaces are required to tell Python which lines of code belong to the body of the for loop. This is critical when the loop contains several lines, which it often will. For example, run this code:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>",
          "<p>There are two indented lines, so they're both part of the body, so <code>---</code> gets printed after each character. Now try running the same code without the indentation in the last line:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\nprint('---')\n</code></pre>",
          "<p>Since <code>print('---')</code> is not indented, it's not part of the loop body. This means it only runs once, after the whole loop has finished running. Both programs are valid, they just do different things.</p>\n<p>The program below is invalid. Both lines in the loop body are indented, but by different amounts. The first line starts with 4 spaces, the second line starts with 2. Try running it.</p>\n<pre><code>for character in name:\n    print(character)\n  print('---')\n</code></pre>",
          "<p>When you indent, you should always indent by 4 spaces. Any consistent indentation is actually acceptable, but 4 spaces is the convention that almost everyone follows. Note that the editor generally makes this easy for you. For example, if you press the 'Tab' key on your keyboard in the editor, it will insert 4 spaces for you.</p>"
        ],
        "title": "Indentation"
      },
      {
        "step_texts": [
          "<p>Time for some exercises! Modify this program:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>\n<p>to instead output:</p>\n<pre><code>---W\n---o\n---r\n---l\n---d\n</code></pre>",
          "<p>Splendid! Now write a program which prints <code>name</code> once for each character in <code>name</code>. For example, for <code>name = 'Amy'</code>, it should output:</p>\n<pre><code>Amy\nAmy\nAmy\n</code></pre>\n<p>For <code>name = 'World'</code>, it should output:</p>\n<pre><code>World\nWorld\nWorld\nWorld\nWorld\n</code></pre>\n<p>By the way, you can set <code>name</code> to anything in the first line. Only the rest of the program after that will be checked.</p>",
          "<p>We're making really good progress! You're solving problems and writing new code!\nLet's keep making things more interesting.</p>"
        ],
        "title": "Basic For Loop Exercises"
      },
      {
        "step_texts": [
          "<p>Before we look at some more loops, we need to quickly learn another concept. Look at this program:</p>\n<pre><code>hello = 'Hello'\nprint(hello)\nhello = hello + '!'\nprint(hello)\n</code></pre>\n<p>What do you think the line <code>hello = hello + '!'</code> does? What do you think the program will output? Make a prediction, then run it to find out.</p>",
          "<p>Python doesn't care that <code>hello</code> is on both the left and the right of the <code>=</code>, it just does what it would always do if the variables were different: it calculates <code>hello + '!'</code> which at the time is <code>'Hello' + '!'</code> which is <code>'Hello!'</code>, and that becomes the new value of <code>hello</code>. If it helps, you can think of that line as split into two steps:</p>\n<pre><code>temp = hello + '!'\nhello = temp\n</code></pre>\n<p>or:</p>\n<pre><code>temp = hello\nhello = temp + '!'\n</code></pre>\n<p>This is very useful in a loop. Think about what this program will do, then run it:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>By the way, <code>''</code> is called the <em>empty string</em> - a string containing no characters.</p>",
          "<p>The details in the above program are important. What goes wrong if you swap the last two lines and run this program instead?</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    print(line)\n    line = line + char\n</code></pre>",
          "<p>The last character in <code>name</code> only gets added to <code>line</code> at the end of the loop, after <code>print(line)</code> has already run for the last time. So that character and the full <code>name</code> never get printed at the bottom of the triangle.</p>"
        ],
        "title": "Building Up Strings"
      },
      {
        "step_texts": [
          "<p>Modify this program:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>to add a space after every character in the triangle, so the output looks like this:</p>\n<pre><code>W\nW o\nW o r\nW o r l\nW o r l d\n</code></pre>",
          "<p>Tremendous! Now modify the program so that each line is backwards, like this:</p>\n<pre><code>W\noW\nroW\nlroW\ndlroW\n</code></pre>",
          "<p>Brilliant!</p>\n<p>Code like:</p>\n<pre><code>line = line + char\n</code></pre>\n<p>is so common that Python lets you abbreviate it. This means the same thing:</p>\n<pre><code>line += char\n</code></pre>\n<p>Note that there is no abbreviation for <code>line = char + line</code>.</p>\n<p>Now use <code>+=</code> and a for loop to write your own program which prints <code>name</code> 'underlined', like this:</p>\n<pre><code>World\n-----\n</code></pre>\n<p>There should be one <code>-</code> for each character in <code>name</code>.</p>",
          "<p>Fantastic!</p>\n<p>By the way, when you don't need to use a variable, it's common convention to name that variable <code>_</code> (underscore), e.g. <code>for _ in name:</code>. This doesn't change how the program runs, but it's helpful to readers.</p>\n<p>Let's make this fancier. Extend your program to draw a box around the name, like this:</p>\n<pre><code>+-------+\n| World |\n+-------+\n</code></pre>\n<p>Note that there is a space between the name and the pipes (<code>|</code>).</p>",
          "<p>You're getting good at this! Looks like you need more of a challenge...maybe instead of putting a name in a box, the name should be the box? Write a program that outputs this:</p>\n<pre><code>+World+\nW     W\no     o\nr     r\nl     l\nd     d\n+World+\n</code></pre>",
          "<p>Sweet! You're really getting the hang of this! If you want, here's one more optional bonus challenge. Try writing a program that outputs:</p>\n<pre><code>W\n o\n  r\n   l\n    d\n</code></pre>\n<p>Or don't, it's up to you.</p>"
        ],
        "title": "Building Up Strings Exercises"
      },
      {
        "step_texts": [
          "<p>Here's some words you need to know:</p>\n<p>An <strong><em>expression</em></strong> is a piece of code that has a value. For example, in this line of code:</p>\n<pre><code>sentence = 'Hello ' + name\n</code></pre>\n<p>there are three expressions:</p>\n<ol>\n<li><code>'Hello '</code></li>\n<li><code>name</code></li>\n<li><code>'Hello ' + name</code></li>\n</ol>\n<p>By contrast, the full line <code>sentence = ...</code> is a <strong><em>statement</em></strong>. It's a command that tells the computer to perform an action. It has no value of its own. This means, for example, that you can't add statements together. This code is invalid:</p>\n<pre><code>(word = 'Hello') + (name = 'Bob')\n</code></pre>\n<p>Specifically, a statement like <code>sentence = ...</code> where a variable is given a value is called <strong><em>assignment</em></strong> - the value is <em>assigned to</em> the the variable.</p>\n<p>A program is a list of statements which are executed in order. A <code>for</code> loop is a <em>compound statement</em>, meaning it has a body of its own which contains other statements. Most statements will also contain expressions, and expressions can contain other smaller expressions, but expressions cannot contain statements.</p>\n<p>The process of calculating the value of an expression is called <strong><em>evaluation</em></strong> - note how it almost contains the word 'value'. The computer <em>evaluates</em> <code>1 + 2</code> to get the value <code>3</code>.</p>\n<p>The process of executing a loop is called <strong><em>iteration</em></strong>. Code like <code>for char in 'Hello':</code> is <em>iterating over</em> the string <code>'Hello'</code>. The fact that it's possible means that strings are <em>iterable</em>. By contrast, numbers are not iterable, which is exactly what Python will tell you if you try <code>for char in 3:</code>. Each run through the loop is <em>one iteration</em>, so in this example there will be 5 iterations.</p>"
        ],
        "title": "Basic Terminology"
      },
      {
        "step_texts": [
          "<p>Now we're going to learn how to tell the computer to make decisions and only run code\nunder certain conditions. For this we will need a new type of value. You've seen\nnumbers and strings, now meet <em>booleans</em>. There are only two boolean values:\n<code>True</code> and <code>False</code>. Try this program:</p>\n<pre><code>condition = True\nprint(condition)\ncondition = False\nprint(condition)\n</code></pre>",
          "<p>Booleans are meant to be used inside <em>if statements</em> (sometimes also called <em>conditionals</em>).</p>\n<p>Here is a simple example for you to run:</p>\n<pre><code>if True:\n    print('This gets printed')\n\nif False:\n    print('This does not')\n</code></pre>",
          "<p>Note how the code inside the first <code>if</code> statement ran, but not the second.</p>\n<p>In general, an <code>if</code> statement looks like this:</p>\n<pre><code>if &lt;condition&gt;:\n    &lt;body&gt;\n</code></pre>\n<p>where <code>&lt;condition&gt;</code> is any expression which evaluates to a boolean and <code>&lt;body&gt;</code> is an <strong>indented</strong> list\nof one or more statements. The structure is quite similar to a <code>for</code> loop. Note the colon (<code>:</code>) which\nis essential.</p>\n<p>When the computer sees <code>if &lt;condition&gt;:</code>, it checks if <code>&lt;condition&gt;</code> is <code>True</code>. If it is, it runs the body.\nIf not, it skips it and continues to the rest of the program.</p>\n<p>Here's a more interesting example for you to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence += '!'\nprint(sentence)\n</code></pre>",
          "<p>(Remember that <code>sentence += '!'</code> means <code>sentence = sentence + '!'</code>)</p>\n<p>Change <code>excited = True</code> to <code>excited = False</code> and run the program again to see what the difference is.</p>",
          "<p>Time for an exercise. Modify the program above to include an extra\nboolean parameter <code>confused</code>, so the program should start like this:</p>\n<pre><code>sentence = 'Hello World'\nexcited = False\nconfused = True\n</code></pre>\n<p>(<code>sentence</code> can be any string and the two booleans can be either <code>True</code> or <code>False</code>)</p>\n<p>When <code>confused</code> is true, the printed sentence should have a question mark added to the end.\nIf both <code>confused</code> and <code>excited</code> are true, the sentence should end with <code>!?</code>.</p>",
          "<p>Well done! This program can do 4 different things depending on how you combine <code>excited</code>\nand <code>confused</code>. Try them out if you want.</p>"
        ],
        "title": "Introducing If Statements"
      },
      {
        "step_texts": [
          "<p>Compound statements like <code>for</code> loops and <code>if</code> statements have bodies which are a list\nof inner statements. Those inner statements can be anything, including other compound statements.\nTry this example of a <code>for</code> loop inside an <code>if</code> statement for when you want to show\nthat you're <em>really</em> excited:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    new_sentence = ''\n    for char in sentence:\n        new_sentence += char\n        new_sentence += '!'\n    sentence = new_sentence\n\nprint(sentence)\n</code></pre>",
          "<p>Note how the body of the <code>if</code> statement (5 lines) is indented as usual, while the body\nof the <code>for</code> loop (2 lines) is indented by an additional 4 spaces in each line to show that\nthose lines are within the <code>for</code> loop. You can see the overall structure of the program\njust by looking at the indentation.</p>\n<p>Alternatively, you can put an <code>if</code> inside a <code>for</code>:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nnew_sentence = ''\nfor char in sentence:\n    new_sentence += char\n    if excited:\n        new_sentence += '!'\n\nsentence = new_sentence\nprint(sentence)\n</code></pre>\n<p>These two programs have the exact same result. However the first one is more efficient as it\nonly iterates over the string if it needs to, since when <code>excited = False</code> nothing changes.</p>"
        ],
        "title": "Combining Compound Statements"
      },
      {
        "step_texts": [
          "<p>Run this program:</p>\n<pre><code>sentence = 'Hello World'\n\ninclude = False\nnew_sentence = ''\nfor char in sentence:\n    if include:\n        new_sentence += char\n    include = True\n\nprint(new_sentence)\n</code></pre>",
          "<p>As you can see, it prints everything but the first character. Take some time to understand how this works.</p>\n<p>In fact, it's time to introduce a new tool to help you understand programs. Click the 'Snoop' button to run the same program while also showing what's happening.</p>",
          "<p>Tada! Scroll to the top of the terminal and let's walk through what snoop is showing you.\nIt starts out very straightforward:</p>\n<pre><code>    1 | sentence = 'Hello World'\n    3 | include = False\n    4 | new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The first lines are simply showing you the lines of the program that the computer ran.\nOn the left is the line number as seen in the editor.</p>\n<p>Running <code>for char in sentence:</code> assigns a value to the variable <code>char</code>, so snoop shows you that value.\nLines starting with <code>......</code> indicate a new variable or a change in the value of an existing variable.\nSuch lines will not be shown when they're redundant, which is why the snoop output doesn't start like this:</p>\n<pre><code>    1 | sentence = 'Hello World'\n ...... sentence = 'Hello World'\n    3 | include = False\n ...... include = False\n    4 | new_sentence = ''\n ...... new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The next two lines are:</p>\n<pre><code>    6 |     if include:\n    8 |     include = True\n</code></pre>\n<p>What's important here is what's not showing: because <code>include</code> is <code>False</code>, line 7 (<code>new_sentence += char</code>) gets skipped. But then <code>include</code> is set to <code>True</code>, so the next iteration of the loop is different:</p>\n<pre><code>    5 | for char in sentence:\n ...... char = 'e'\n    6 |     if include:\n    7 |         new_sentence += char\n .............. new_sentence = 'e'\n</code></pre>\n<p><code>new_sentence += char</code> runs for the first time and the variable <code>new_sentence</code> gets a new value.</p>\n<p>Now modify the program to do the opposite: only print the first character, leave out the rest.</p>",
          "<p>Great job! You're working with increasingly complex programs.</p>"
        ],
        "title": "Understanding Programs With Snoop"
      },
      {
        "step_texts": [
          "<p>An <code>if</code> statement can optionally have an <code>else</code> part. Run this example:</p>\n<pre><code>condition = True\nif condition:\n    print('Yes')\nelse:\n    print('No')\n</code></pre>",
          "<p>Now change the first line to <code>condition = False</code> and run it again.</p>",
          "<p>Think of <code>else</code> as saying 'or else' or 'otherwise'. It means that if the condition in the <code>if</code>\nis false, then the body of the <code>else</code> will run instead. Whether the condition is true or false,\nexactly one of the two bodies will run.</p>\n<p>Here's a more interesting example to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence = sentence.upper()\nelse:\n    sentence = sentence.lower()\nprint(sentence)\n</code></pre>",
          "<p><code>sentence.upper()</code> is a new kind of expression we haven't encountered yet. What's going on here is that <code>sentence</code> is a string and strings have various <em>methods</em> that let you conveniently calculate new values from them, including <code>upper</code> and <code>lower</code>. The names refer to uppercase (capital letters) and lowercase (small letters). <code>'Hello World'.upper()</code> evaluates to <code>'HELLO WORLD'</code>. It doesn't change the contents of <code>sentence</code> though, so you have to assign the new value again with <code>sentence = sentence.upper()</code>.</p>\n<p>Now change <code>excited</code> to <code>False</code> and run it again.</p>",
          "<p>Here's a broken program:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    char = '!'\nsentence += char\n\nprint(sentence)\n</code></pre>\n<p>Can you see the problem? If you run it, everything seems fine. What could go wrong?</p>\n<p>Spoilers below! Have you figured it out?</p>\n<p>What happens if you change <code>excited</code> to <code>False</code>?</p>",
          "<p>If <code>excited</code> is true then <code>char</code> is defined and everything runs fine. But otherwise\n<code>char</code> never gets assigned a value, so trying to use it in <code>sentence += char</code> fails.</p>\n<p>Fix this by adding an <code>else</code> clause to the <code>if</code> so that if <code>excited</code> is false, a full stop (<code>.</code>)\nis added to the end of the sentence instead of an exclamation mark (<code>!</code>).</p>",
          "<p>Time for a challenge!</p>\n<p>Write a program which, given a string <code>sentence</code>, prints a modified version with\nthe same letters, where the first letter is capitalised and the rest are lowercase.\nFor example, the output should be <code>Hello world</code> whether the input <code>sentence = 'hello world'</code>\nor <code>'HELLO WORLD'</code>.</p>",
          "<p>Excellent!!!</p>\n<p>One more exercise, and then you can relax. </p>\n<p>Write a program which prints <code>sentence</code> mockingly, e.g:</p>\n<pre><code>OnE MoRe eXeRcIsE, aNd tHeN YoU CaN ReLaX.\n</code></pre>\n<p>Every second character should be lowercased, the rest should be uppercase.</p>",
          "<p>Perfect! Take a moment to be proud of what you've achieved. Can you feel your brain growing?</p>"
        ],
        "title": "<code>if</code> and <code>else</code>"
      },
      {
        "step_texts": [
          "<p>There are several ways to obtain booleans without assigning them directly,\nwhich allows you to construct very useful <code>if</code> statements. In particular there\nare many <em>comparison operators</em> which compare the values of two expressions.\nThe most common is the equality operator which checks if two values are equal.\nIt's denoted by two equals signs: <code>==</code>. Try running this:</p>\n<pre><code>print(1 + 2 == 3)\nprint(4 + 5 == 6)\nprint('ab' + 'c' == 'a' + 'bc')\n</code></pre>",
          "<p>As you can see, if the values are equal, the equality expression evaluates to <code>True</code>,\notherwise it's <code>False</code>.</p>\n<p>Note the difference between the equality operator <code>==</code> and a single <code>=</code> which has different meanings,\nparticularly in assignment statements as you've seen them so far. What happens if you try\nremoving a single <code>=</code> from the previous program?</p>",
          "<p>Let's use <code>==</code> in an <code>if</code> statement. In this program, the <code>if</code> body runs only when <code>c</code> is the character <code>'s'</code>. See for yourself.</p>\n<pre><code>name = 'kesha'\nnew_name = ''\nfor c in name:\n    if c == 's':\n        c = '$'\n    new_name += c\n\nprint(new_name)\n</code></pre>",
          "<p>Now extend the program to also replace <code>e</code> with <code>3</code> and <code>a</code> with <code>@</code>.</p>",
          "<p>Well done!</p>"
        ],
        "title": "The Equality Operator"
      },
      {
        "step_texts": [
          "<p>Quick biology lesson! Most of the cells in your body contain your full genetic code in DNA.\nThis consists of strands of molecular units called nucleobases which come in four varieties:\nAdenine, Cytosine, Guanine, and Thymine, or ACGT for short.\nSo part of a single strand might be something like:</p>\n<pre><code>AGTAGCGTCCTTAGTTACAGGATGGCTTAT...\n</code></pre>\n<p>This will be paired with another strand where A is replaced by T and vice versa,\nand C is replaced by G and vice versa, e.g:</p>\n<pre><code>TCATCGCAGGAATCAATGTCCTACCGAATA...\n</code></pre>\n<p>The two strands are 'zipped' together into the famous double helix structure,\njoined by the matching A-T and C-G pairs. These pairings are essential in copying DNA when\ncells divide and reproduce. The double helix is unzipped and the code is transcribed\ninto its opposite version to make the copy.</p>\n<p>We're going to repeat that process. Let's try the same kind of program we just wrote:</p>\n<pre><code>dna = 'AGTAGCGTC'\nopposite_dna = ''\nfor char in dna:\n    if char == 'A':\n        char = 'T'\n    if char == 'T':\n        char = 'A'\n    if char == 'G':\n        char = 'C'\n    if char == 'C':\n        char = 'G'\n    opposite_dna += char\n\nprint(opposite_dna)\n</code></pre>",
          "<p>Oh dear, that doesn't quite work. <code>T</code> is changed to <code>A</code> but <code>A</code> isn't changed to anything.\nCan you see why?</p>\n<p>When <code>char == 'A'</code>, then the body <code>char = 'T'</code> does indeed run. But that means that the following\ncondition <code>char == 'T'</code> also passes and so <code>char = 'A'</code> and we're back where we started.\nWe need to only change <code>char</code> from <code>T</code> to <code>A</code> if <code>char</code> wasn't already <code>A</code> to begin with,\nmeaning <code>char == 'A'</code> was <code>False</code>. We can do that with an <code>else</code>, like so:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelse:\n    if char == 'T':\n        char = 'A'\n</code></pre>\n<p>Now fix the program to replace all characters correctly.</p>",
          "<p>Brilliant! You have mimicked what your own cells are constantly doing.</p>\n<p>An <code>if</code> inside an <code>else</code> can be replaced by a single keyword <code>elif</code>. For example,\nthe previous code can be changed to this:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelif char == 'T':\n    char = 'A'\nelif char == 'G':\n    char = 'C'\nelif char == 'C':\n    char = 'G'\n</code></pre>",
          "<p>It's common to have a chain of <code>elif</code> clauses when you want exactly one of many\nbodies to run, like in this case. In general, code like this:</p>\n<pre><code>if X:\n    ...\nelse:\n    if Y:\n        ...\n    else:\n        if Z:\n            ...\n        else:\n            ...\n</code></pre>\n<p>can be rewritten as:</p>\n<pre><code>if X:\n    ...\nelif Y:\n    ...\nelif Z:\n    ...\nelse:\n    ...\n</code></pre>\n<p>which is both shorter and saves you from unpleasant nested indentation.\nThe difference is only cosmetic: once the computer runs this code, it can't\ntell the difference between the two versions.</p>\n<p>Note that <code>elif</code>(s) can optionally be followed by one final <code>else</code>. We didn't include one\nin our DNA example, but we could add one to alert us to any unexpected characters\nin the input, or change <code>elif char == 'C':</code> to <code>else:</code> if we were confident\nabout the input being valid.</p>"
        ],
        "title": "Introducing <code>elif</code>"
      },
      {
        "step_texts": [
          "<p>The opposite of the equals operator <code>==</code> is the <em>not equals</em> operator <code>!=</code>. If you squint it sort of looks like \u2260. It evaluates to <code>True</code> when two values are...not equal. Try it for yourself in the shell.</p>",
          "<p>Here's a cute little program using <code>!=</code>:</p>\n<pre><code>sentence = \"The e key on my keyboard is broken\"\nnew_sentence = ''\nfor c in sentence:\n    if c != 'e':\n        new_sentence += c\nprint(new_sentence)\n</code></pre>",
          "<p>Other handy operators are <code>&lt;</code> (less than) and <code>&gt;</code> (greater than). For example, <code>a &lt; b</code> means \"<code>a</code> is less than <code>b</code>\". Try using one of these in the shell to compare two numbers.</p>",
          "<p>You can also use these operators to compare strings. If you arrange two strings in alphabetical order, the first one is 'less than' the second. See for yourself.</p>",
          "<p>Here's a practical example of <code>&lt;</code> in action for you to try:</p>\n<pre><code>percentage = 73\n\nif percentage &lt; 20:\n    grade = \"F\"\nelif percentage &lt; 40:\n    grade = \"D\"\nelif percentage &lt; 60:\n    grade = \"C\"\nelif percentage &lt; 80:\n    grade = \"B\"\nelse:\n    grade = \"A\"\n\nprint(grade)\n</code></pre>\n<p>Recall that <code>elif percentage &lt; 40</code> after <code>if percentage &lt; 20</code> means \"if the percentage wasn't less than 20 and also is less than 40\", so it will pass for all numbers from 20 to 39 inclusive. Similarly a 'C' is for percentages from 40 to 59, and an 'A' is for any number 80 and up.</p>",
          "<p>Now for an exercise: write a program that takes three variables <code>x1</code>, <code>x2</code>, and <code>x3</code>, and prints the value of the smallest one. So for:</p>\n<pre><code>x1 = 'Charlie'\nx2 = 'Alice'\nx3 = 'Bob'\n</code></pre>\n<p>it should print <code>Alice</code>.</p>",
          "<p>Marvelous!</p>\n<p>There are many ways this could be solved. Here's one solution:</p>\n<pre><code>if x1 &lt; x2:\n    if x1 &lt; x3:\n        first = x1\n    else:\n        first = x3\nelse:\n    if x2 &lt; x3:\n        first = x2\n    else:\n        first = x3\n\nprint(first)\n</code></pre>\n<p>Here's another:</p>\n<pre><code>first = x1\n\nif x2 &lt; first:\n    first = x2\n\nif x3 &lt; first:\n    first = x3\n\nprint(first)\n</code></pre>\n<p>These programs (and yours too) all work equally well with numbers and strings,\nbut not a mixture.</p>\n<p><code>&lt;</code> and <code>&gt;</code> evaluate to False if the compared values are equal. For example,\n3 is not less than 3, so <code>3 &lt; 3</code> and <code>3 &gt; 3</code> are both False.\nTo allow equal values, use <code>&lt;=</code> and <code>&gt;=</code>.\nAgain, if you squint, they look a bit like \u2264 and \u2265.\nNote that the <code>=</code> comes second - there are no such operators as <code>=&lt;</code> or <code>=&gt;</code>.\nTo remember this, read them out loud as \"less than or equal to\"\nand \"greater than or equal to\".</p>\n<p>In summary, the main comparison operators are <code>==</code>, <code>!=</code>, <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>, and <code>&gt;=</code>.\nIf you ever have doubts about what they do, play with them in the shell!</p>"
        ],
        "title": "Other Comparison Operators"
      },
      {
        "step_texts": [
          "<p>It's time to learn about a powerful new type of value called lists. Here's an example:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor word in words:\n    print(word)\n</code></pre>",
          "<p>A list is a <em>sequence</em> (an ordered collection/container) of any number of values.\nThe values are often referred to as <em>elements</em>.\nThey can be anything: numbers, strings, booleans, even lists! They can also be a mixture of types.</p>\n<p>To create a list directly, like above:</p>\n<ol>\n<li>Write some square brackets: <code>[]</code></li>\n<li>If you don't want an empty list, write some expressions inside to be the elements.</li>\n<li>Put commas (<code>,</code>) between elements to separate them.</li>\n</ol>\n<p>Here's another example of making a list:</p>\n<pre><code>x = 1\nthings = ['Hello', x, x + 3]\nprint(things)\n</code></pre>",
          "<p>As you saw above, lists are <em>iterable</em>, meaning you can iterate over them with a <code>for loop</code>.\nHere's a program that adds up all the numbers in a list:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9]\n\ntotal = 0\nfor number in numbers:\n    total += number\n\nprint(total)\n</code></pre>",
          "<p>Now modify the program so that it can add up a list of strings instead of numbers.\nFor example, given:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n</code></pre>\n<p>it should print:</p>\n<pre><code>Thisisalist\n</code></pre>",
          "<p>Optional bonus challenge: extend the program to insert a separator string <em>between</em> each word.\nFor example, given</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\nseparator = ' - '\n</code></pre>\n<p>it would output:</p>\n<pre><code>This - is - a - list\n</code></pre>\n<p>Lists and strings have a lot in common.\nFor example, you can add two lists to combine them together into a new list.\nYou can also create an empty list that has no elements.\nCheck for yourself:</p>\n<pre><code>numbers = [1, 2] + [3, 4]\nprint(numbers)\nnew_numbers = []\nnew_numbers += numbers\nnew_numbers += [5]\nprint(new_numbers)\n</code></pre>\n<p>With that knowledge, write a program which takes a list of numbers\nand prints a list where each number has been doubled. For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[6, 2, 8, 2, 10, 18, 4, 12, 10]\n</code></pre>",
          "<p>Great!</p>\n<p>When you want to add a single element to the end of a list, instead of:</p>\n<pre><code>some_list += [element]\n</code></pre>\n<p>it's actually more common to write:</p>\n<pre><code>some_list.append(element)\n</code></pre>\n<p>There isn't really a big difference between these, but <code>.append</code>\nwill be more familiar and readable to most people.</p>\n<p>Now use <code>.append</code> to write a program which prints a list containing only the numbers bigger than 5.</p>\n<p>For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[9, 6]\n</code></pre>",
          "<p>Fantastic! We're making great progress.</p>"
        ],
        "title": "Introducing Lists"
      },
      {
        "step_texts": [
          "<p>Exercise: write a program which takes a list and a value and checks\nif the list contains the value. For example, given:</p>\n<pre><code>things = ['This', 'is', 'a', 'list']\nthing_to_find = 'is'\n</code></pre>\n<p>it should print <code>True</code>, but for</p>\n<pre><code>thing_to_find = 'other'\n</code></pre>\n<p>it should print <code>False</code>.</p>",
          "<p>Nice!</p>\n<p>A typical solution looks something like this:</p>\n<pre><code>found = False\nfor thing in things:\n    if thing == thing_to_find:\n        found = True\n\nprint(found)\n</code></pre>\n<p>Your solution is probably similar. It's fine, but it's a bit inefficient.\nThat's because it'll loop over the entire list even if it finds the element at the beginning.\nYou can stop any loop using a <code>break</code> statement, like so:</p>\n<pre><code>for thing in things:\n    if thing == thing_to_find:\n        found = True\n        break\n</code></pre>\n<p>This is just as correct but skips unnecessary iterations and checks once it finds the element.\nYou can use snoop to see the difference.</p>"
        ],
        "title": "Using <code>break</code> to end a loop early"
      },
      {
        "step_texts": [
          "<p>Looping is great, but often you just want to retrieve a single element from the list at a known position.\nHere's how:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nprint(words[0])\nprint(words[1])\nprint(words[2])\nprint(words[3])\n</code></pre>",
          "<p>In general, you can get the element at the position <code>i</code> with <code>words[i]</code>. The operation is called <em>subscripting</em> or <em>indexing</em>, and the position is called the <em>index</em>.</p>\n<p>You've probably noticed that the first index is 0, not 1. In programming, counting starts at 0. It seems weird, but that's how most programming languages do it, and it's generally agreed to be better.</p>\n<p>This also means that the last index in this list of 4 elements is 3. What happens if you try getting an index greater than that?</p>",
          "<p>There you go. <code>words[4]</code> and beyond don't exist, so trying that will give you an error.</p>\n<p>By the way, you can get the number of elements in a list (commonly called the <em>length</em>) using <code>len(words)</code>.\nThat means that the last valid index of the list is <code>len(words) - 1</code>, so the last element is <code>words[len(words) - 1]</code>. Try these for yourself.</p>\n<p>So in general, the valid indices are:</p>\n<pre><code>[0, 1, 2, ..., len(words) - 2, len(words) - 1]\n</code></pre>\n<p>There's a handy built in function to give you these values, called <code>range</code>:</p>\n<pre><code>for i in range(10):\n    print(i)\n</code></pre>",
          "<p><code>range(n)</code> is similar to the list <code>[0, 1, 2, ..., n - 2, n - 1]</code>.\nThis gives us an alternative way to loop over a list:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor index in range(len(words)):\n    print(index)\n    print(words[index])\n</code></pre>",
          "<p>Let's get some exercise! Given a list <code>things</code> and a value <code>to_find</code>,\nprint the first index of <code>to_find</code> in the list, i.e. the lowest number <code>i</code> such that\n<code>things[i]</code> is <code>to_find</code>. For example, for</p>\n<pre><code>things = ['on', 'the', 'way', 'to', 'the', 'store']\nto_find = 'the'\n</code></pre>\n<p>your program should print <code>1</code>.</p>\n<p>You can assume that <code>to_find</code> appears at least once.</p>",
          "<p>Nice!</p>\n<p>By the way, indexing and <code>len()</code> also work on strings. Try them out in the shell.</p>\n<p>Here's another exercise. Given two strings of equal length, e.g:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"World\"\n</code></pre>\n<p>print them vertically side by side, with a space between each character:</p>\n<pre><code>H W\ne o\nl r\nl l\no d\n</code></pre>",
          "<p>Incredible!</p>\n<p>Your solution probably looks something like this:</p>\n<pre><code>for i in range(len(string1)):\n    char1 = string1[i]\n    char2 = string2[i]\n    print(char1 + ' ' + char2)\n</code></pre>\n<p>This doesn't work so well if the strings have different lengths.\nIn fact, it goes wrong in different ways depending on whether <code>string1</code> or <code>string2</code> is longer.\nYour next challenge is to fix this problem by filling in 'missing' characters with spaces.</p>\n<p>For example, for:</p>\n<pre><code>string1 = \"Goodbye\"\nstring2 = \"World\"\n</code></pre>\n<p>output:</p>\n<pre><code>G W\no o\no r\nd l\nb d\ny  \ne\n</code></pre>\n<p>and for:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"Elizabeth\"\n</code></pre>\n<p>output:</p>\n<pre><code>H E\ne l\nl i\nl z\no a\n  b\n  e\n  t\n  h\n</code></pre>",
          "<p>Magnificent! Take a break, you've earned it!</p>"
        ],
        "title": "Getting Elements at a Position"
      },
      {
        "step_texts": [
          "<p>It's time to expand your vocabulary some more.</p>\n<p><code>print</code> and <code>len</code> are <strong><em>functions</em></strong>. See for yourself:</p>\n<pre><code>print(len)\nprint(print)\n</code></pre>",
          "<p>An expression like <code>len(things)</code> or <code>print(things)</code> is a function <strong><em>call</em></strong> - when you write that, you are <strong><em>calling</em></strong> the function <code>len</code> or <code>print</code>. The fact that this is possible means that functions are <strong><em>callable</em></strong>:</p>\n<pre><code>print(callable(len))\n</code></pre>",
          "<p>Most things are not callable, so trying to call them will give you an error:</p>\n<pre><code>f = 'a string'\nprint(callable(f))\nf()\n</code></pre>",
          "<p>In the call <code>len(things)</code>, <code>things</code> is an <strong><em>argument</em></strong>. Sometimes you will also see the word <strong><em>parameter</em></strong>, which means basically the same thing as argument. It's a bit like you're giving the argument to the function - specifically we say that the argument <code>things</code> is <em>passed</em> to <code>len</code>, and <code>len</code> <em>accepts</em> or <em>receives</em> the argument.</p>\n<p><code>len(things)</code> will evaluate to a number such as 3, in which case we say that <code>len</code> <strong><em>returned</em></strong> 3.</p>\n<p>All calls have to return something...even if it's nothing. For example, <code>print</code>'s job is to display something on screen, not to return a useful value. So it returns something useless instead:</p>\n<pre><code>things = [1, 2, 3]\nlength = len(things)\nprinted = print(length)\nprint(printed)\n</code></pre>",
          "<p><code>None</code> is a special 'null' value which can't do anything interesting. It's a common placeholder that represents the lack of a real useful value. Functions that don't want to return anything return <code>None</code> by default. If you see an error message about <code>None</code> or <code>NoneType</code>, it often means you assigned the wrong thing to a variable:</p>\n<pre><code>things = print([1, 2, 3])\nlength = len(things)\n</code></pre>",
          "<p>A <strong><em>method</em></strong> is a function which belongs to a type, and can be called on all values of that type using <code>.</code>. For example, <code>upper</code> and <code>lower</code> are methods of strings, which are called with e.g. <code>word.upper()</code>:</p>\n<pre><code>word = 'Hello'\nprint(word.upper)\nprint(word.upper())\n</code></pre>",
          "<p>Another example is that <code>append</code> is a method of lists. But you can't use <code>.upper</code> on a list or <code>.append</code> on a string:</p>\n<pre><code>word = 'Hello'\nword.append('!')\n</code></pre>",
          "<p>The word 'attribute' in the error message refers to the use of <code>.</code> - the error actually comes just from <code>word.append</code>, without even a call.</p>"
        ],
        "title": "Terminology: Calling functions and methods"
      },
      {
        "step_texts": [
          "<p>Let's review how to work with lists. Suppose we have a list <code>nums = [1, 2, 3]</code>. You can use:</p>\n<ul>\n<li><strong><code>append</code></strong>: Add an element to the end of the list. <code>nums.append(4)</code> changes the list to <code>[1, 2, 3, 4]</code>.</li>\n<li><strong><code>len</code></strong>: Returns the number of elements. <code>len(nums)</code> is <code>3</code>.</li>\n<li><strong><code>range</code></strong>: <code>range(n)</code> is an object similar to the list of numbers from 0 to <code>n - 1</code>. In particular, <code>range(len(nums))</code> is like <code>[0, 1, 2]</code>.</li>\n<li><strong><code>subscripting</code></strong>: Get a value at an index. <code>nums[0]</code> is 1, <code>nums[1]</code> is 2, <code>nums[2]</code> is 3.</li>\n<li><strong><code>+</code></strong>: Concatenates lists. <code>nums + [4, 5]</code> is <code>[1, 2, 3, 4, 5]</code>.</li>\n</ul>\n<p>Here's some new things. Try them out in the shell.</p>\n<ul>\n<li><strong><code>subscript assignment</code></strong>: Set a value at an index. <code>nums[0] = 9</code> changes the list to <code>[9, 2, 3]</code>.</li>\n<li><strong><code>join</code></strong>: Add a list of strings with a separator in between. This is a method of strings (the separator) which takes an iterable of strings as an argument. <code>'--'.join(['apples', 'oranges', 'bananas'])</code> returns <code>'apples--oranges--bananas'</code>. You can also use an empty string if you don't want a separator, e.g. <code>''.join(['apples', 'oranges', 'bananas'])</code> returns <code>'applesorangesbananas'</code>. </li>\n<li><strong><code>sum</code></strong>: Add a list of numbers. <code>sum(nums)</code> is 6.</li>\n<li><strong><code>in</code></strong>: A comparison operator that checks if a value is in a list. <code>2 in nums</code> is <code>True</code>, but <code>4 in nums</code> is <code>False</code>.</li>\n<li><strong><code>index</code></strong>: Returns the first index of a value in a list. <code>[7, 8, 9, 8].index(8)</code> is 1. Raises an error if the value isn't there.</li>\n</ul>\n<p>You may recognise some of these from your exercises. I assure you that those exercises were not pointless, as you've now learned valuable fundamental skills. For example, you can use <code>in</code> to check if a list contains 5, but there's no similarly easy way to check for a number bigger than 5.</p>\n<p>It's useful to know these functions, but it's not easy to learn them all, and there's many more. A more important skill is being able to look things up. For example, here are some typical ways you might Google the above functions if you forgot their names:</p>\n<ul>\n<li><code>append</code><ul>\n<li>python add element to list</li>\n<li>python add item at end of list</li>\n</ul>\n</li>\n<li><code>len</code><ul>\n<li>python size of list</li>\n<li>python number of elements in list</li>\n<li>python how many characters in string</li>\n</ul>\n</li>\n<li><code>join</code><ul>\n<li>python combine list of strings with separator</li>\n<li>python add together list of strings with string in between</li>\n</ul>\n</li>\n<li><code>sum</code><ul>\n<li>python add list of numbers</li>\n<li>python total of numbers</li>\n</ul>\n</li>\n<li><code>in</code><ul>\n<li>python check if list contains value</li>\n<li>python test if list has element</li>\n</ul>\n</li>\n<li><code>index</code><ul>\n<li>python get position of element</li>\n<li>python get index of value</li>\n</ul>\n</li>\n</ul>\n<p>Let's practice this skill now. Find a function/method that returns the value in a list which is bigger than any other value. For example, given the list <code>[21, 55, 4, 91, 62, 49]</code>, it will return <code>91</code>. You should write the answer in the shell as a single small expression. For example, if you were looking for the function <code>sum</code>, you could write <code>sum([21, 55, 4, 91, 62, 49])</code>. Don't solve this manually with a loop.</p>",
          "<p>Good find! Let's do one more. If you have a list:</p>\n<pre><code>nums = [1, 2, 3, 4, 5]\n</code></pre>\n<p>You could write <code>nums.append(9)</code> and <code>nums</code> would change to:</p>\n<pre><code>[1, 2, 3, 4, 5, 9]\n</code></pre>\n<p>But suppose you don't want the 9 to be at the end, you want it to go between the second and third elements:</p>\n<pre><code>[1, 2, 9, 3, 4, 5]\n</code></pre>\n<p>Call the right function/method in the shell to do that.</p>",
          "<p>Perfect!</p>\n<p>It can also be useful to Google things like \"python list tutorial\", e.g. if:</p>\n<ul>\n<li>Googling a specific method has failed so you want to find it manually.</li>\n<li>You're still confused about lists after this course.</li>\n<li>It's been a while since you learned about lists and you need a reminder.</li>\n<li>You're struggling to solve a problem with lists and you need to go back to basics and strengthen your foundations.</li>\n</ul>\n<p>There are also ways to find information without any googling. Try <code>dir([])</code> in the shell.</p>",
          "<p><code>dir()</code> returns a list of the argument's attributes, which are mostly methods. Many will start with <code>__</code> which you can ignore for now - scroll to the end of the list and you'll see some familiar methods.</p>\n<p>Here are a few more useful functions/methods. Suppose <code>nums = [28, 99, 10, 81, 59, 64]</code></p>\n<ul>\n<li><strong><code>sorted</code></strong>: Takes an iterable and returns a list of the elements in order. <code>sorted(nums)</code> returns <code>[10, 28, 59, 64, 81, 99]</code>.</li>\n<li><strong><code>pop</code></strong>: Removes and returns an element at a given index. <code>nums.pop(3)</code> removes <code>nums[3]</code> (<code>81</code>) from the list and returns it. Without an argument, i.e. just <code>nums.pop()</code>, it will remove and return the last element.</li>\n<li><strong><code>remove</code></strong>: Removes the first occurrence of the given element. <code>nums.remove(10)</code> will leave <code>nums</code> as <code>[28, 99, 81, 59, 64]</code>. Raises an error if the value doesn't exist. Equivalent to <code>nums.pop(nums.index(10))</code>.</li>\n<li><strong><code>count</code></strong>: Returns the number of times the argument appears in the list. <code>[1, 2, 3, 2, 7, 2, 5].count(2)</code> is 3.</li>\n</ul>\n<p>You've already seen that <code>len</code> and subscripting work with strings, a bit as if strings are lists of characters. Strings also support some of the new methods we've learned, not just for characters but for any substring. For example:</p>\n<ul>\n<li><code>'the' in 'feed the dog and the cat'</code> is <code>True</code></li>\n<li><code>'feed the dog and the cat'.count('the')</code> is 2</li>\n<li><code>'feed the dog and the cat'.index('the')</code> is 5</li>\n</ul>\n<p>Note that in most cases, methods which modify a list in place (<code>append</code>, <code>insert</code>, <code>remove</code>) merely return <code>None</code>, while the remaining functions/methods return a new useful value without changing the original argument. The only exception is the <code>pop</code> method.</p>\n<p>Modifying a value directly is called <em>mutation</em> - types of values which can be mutated are <em>mutable</em>, while those that can't are <em>immutable</em>. Strings are immutable - they don't have any methods like <code>append</code> or even subscript assignment. You simply can't change a string - you can only create new strings and use those instead. That means that this is a useless statement on its own:</p>\n<pre><code>word.upper()\n</code></pre>\n<p>The string referred to by <code>word</code> isn't modified, instead <code>word.upper()</code> returned a new string which was immediately discarded. If you want to change the value that <code>word</code> refers to, you have to assign a new value to the variable:</p>\n<pre><code>word = word.upper()\n</code></pre>\n<p>Or you can use <code>word.upper()</code> immediately in a larger expression, e.g.</p>\n<pre><code>if word.lower() == 'yes':\n</code></pre>"
        ],
        "title": "Functions And Methods For Lists"
      },
      {
        "step_texts": [
          "<p>It's time to learn about another tool to explore programs. Put some code in the editor and then click the new \"Python Tutor\" button. Here's some example code if you want:</p>\n<pre><code>all_numbers = [2, 4, 8, 1, 9, 7]\n\nsmall_numbers = []\nbig_numbers = []\n\nfor number in all_numbers:\n    if number &lt;= 5:\n        small_numbers.append(number)\n    else:\n        big_numbers.append(number)\n\nprint(small_numbers)\nprint(big_numbers)\n</code></pre>\n<p>The button will open a new tab with a visualisation from <a href=\"http://pythontutor.com\">pythontutor.com</a>.\nThere you can navigate through the program step by step with the \"Prev\" or \"Next\" buttons, or drag\nthe slider left or right. You can also see the values of variables on the right.</p>"
        ],
        "title": "Understanding Programs With Python Tutor"
      },
      {
        "step_texts": [
          "<p>It's time to learn some technical details that are often misunderstood and lead to errors.\nRun this program:</p>\n<pre><code>list1 = [1, 2, 3]\nlist2 = [1, 2, 3]\n\nprint(list1)\nprint(list2)\nprint(list1 == list2)\n\nprint(list1 is list2)\n\nlist1.append(4)\n\nprint(list1)\nprint(list2)\n</code></pre>",
          "<p>This program is quite straightforward and mostly consists of things you're familiar with.\nWe create two variables which refer to lists.\nThe lists have the same elements, so they are equal: <code>list1 == list2</code> is <code>True</code>.</p>\n<p>But then there's a new comparison operator: <code>is</code>. Here <code>list1 is list2</code> is <code>False</code>.\nThat means that regardless of the two lists being equal,\nthey are still two separate, distinct, individual lists.\nAs a result, when you append 4 to <code>list1</code>, only <code>list1</code> changes.</p>\n<p>Now change <code>list2 = [1, 2, 3]</code> to <code>list2 = list1</code> and see what difference it makes.</p>",
          "<p>Now <code>list1 is list2</code> is <code>True</code>, because <em>there is only one list</em>, and the two variables\n<code>list1</code> and <code>list2</code> both refer to that same list. <code>list1.append(4)</code> appends to the one list\nand the result can be seen in both <code>print(list1)</code> and <code>print(list2)</code> because both lines\nare now just different ways of printing the same list.</p>\n<p>I recommend running both versions with Python Tutor to see how it visualises the difference.\nIn the second case, the two variables both have arrows pointing to a single list object.</p>\n<p><code>list2 = list1</code> doesn't create an eternal link between the variables. If you assign a new value\nto <em>either</em> of the variables, e.g. <code>list1 = [7, 8, 9]</code>, the other variable will be unaffected\nand will still point to the original list.</p>\n<p>Basically, an assignment like:</p>\n<pre><code>list2 = &lt;expression&gt;\n</code></pre>\n<p>means 'make the variable <code>list2</code> refer to whatever <code>&lt;expression&gt;</code> evaluates to'.\nIt doesn't make a copy of that value, which is how both variables can end up pointing to the same list.\nBut as we've learned before, <code>list2</code> doesn't remember <code>&lt;expression&gt;</code>, only the value.\nIt doesn't know about other variables.</p>\n<p>You can copy a list with the <code>copy</code> method:</p>\n<pre><code>list2 = list1.copy()\n</code></pre>\n<p>This will make the program behave like the first version again.</p>\n<p>If you come across this kind of problem and you're still having trouble understanding this stuff, read the essay <a href=\"https://nedbatchelder.com/text/names.html\">Facts and myths about Python names and values</a>.</p>"
        ],
        "title": "<code>==</code> vs <code>is</code>"
      },
      {
        "step_texts": [
          "<p>Consider this program. It loops through a numbers and removes the ones smaller than 10. Or at least, it tries to. I recommend running it with Python Tutor.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor i in range(len(numbers)):\n    number = numbers[i]\n    if number &lt;= 10:\n        numbers.pop(i)\nprint(numbers)\n</code></pre>\n<p>(remember that <code>numbers.pop(i)</code> removes the element from <code>numbers</code> at index <code>i</code>)</p>\n<p>As it runs, it clearly skips even looking at 7 or 3 and doesn't remove them, and at the end it fails when it tries to access an index that's too high. Can you see why this happens?</p>\n<p>The index variable <code>i</code> runs through the usual values 0, 1, 2, ... as it's supposed to, but as the list changes those are no longer the positions we want. For example in the first iteration <code>i</code> is 0 and <code>number</code> is 10, which gets removed. This shifts the rest of the numbers left one position, so now 7 is in position 0. But then in the next iteration <code>i</code> is 1, and <code>numbers[i]</code> is 8. 7 got skipped. </p>\n<p>We could try writing the program to use <code>remove</code> instead of <code>pop</code> so we don't have to use indices. It even looks nicer this way.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor number in numbers:\n    if number &lt;= 10:\n        numbers.remove(number)\nprint(numbers)\n</code></pre>\n<p>But it turns out this does the same thing, for the same reason. Iterating over a list still goes through the indices under the hood.</p>\n<p>The lesson here is to <strong><em>never modify something while you iterate over it</em></strong>. Keep mutation and looping separate.</p>\n<p>The good news is that there are many ways to solve this. You can instead just loop over a copy, as in:</p>\n<pre><code>for number in numbers.copy():\n</code></pre>\n<p>Now the list being modified and the list being itererated over are separate objects, even if they start out with equal contents.</p>\n<p>Similarly, you could loop over the original and modify a copy:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = numbers.copy()\n\nfor number in numbers:\n    if number &lt;= 10:\n        big_numbers.remove(number)\nprint(big_numbers)\n</code></pre>\n<p>Or you could build up a new list from scratch. In this case, we've already done a similar thing in an exercise:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = []\n\nfor number in numbers:\n    if number &gt; 10:\n        big_numbers.append(number)\nprint(big_numbers)\n</code></pre>"
        ],
        "title": "Modifying While Iterating"
      }
    ],
    "user": {
      "developerMode": true,
      "email": "[email protected]"
    },
    "processing": false,
    "numHints": 0,
    "editorContent": "sentence = 'Hello World'\n\ninclude = False\nnew_sentence = ''\nfor char in sentence:\n    if include:\n        new_sentence += char\n    include = True\n\nprint(new_sentence)",
    "messages": [],
    "pastMessages": [],
    "showingPageIndex": 16,
    "requestingSolution": false,
    "solution": {
      "tokens": [],
      "maskedIndices": [],
      "mask": []
    }
  }
}

{
  "rpc": {
    "loading": [],
    "error": null
  },
  "book": {
    "server": {
      "hints": [
        "<p>Forget loops for a moment. How would you write a program which prints <code>name</code> 3 times?</p>",
        "<p>The solution looks very similar to the other programs we've seen in this section.</p>",
        "<p>The for loop will create a variable such as <code>character</code>, but the program doesn't need to use it.</p>"
      ],
      "page_index": 10,
      "showBirdseye": true,
      "showEditor": true,
      "showPythonTutor": false,
      "showSnoop": false,
      "step_index": 1
    },
    "pages": [
      {
        "step_texts": [
          "<p>At the bottom right of the screen is the <em>shell</em>. This is a place for running small bits of Python code. Just type in some code, press enter, and it'll run! Try it now:</p>\n<ol>\n<li>Click anywhere on the shell (the black area).</li>\n<li>Type <code>1+2</code></li>\n<li>Press the Enter key on your keyboard.</li>\n</ol>",
          "<p>Great! Python evaluated <code>1+2</code> and got the result <code>3</code>, so the shell displays that.</p>\n<p>The shell is probably your most important tool for learning Python, and you should spend lots of time experimenting and exploring in it. Be curious! Constantly ask yourself \"What would happen if I ran X?\" and then immediately answer that question by running it! Never be scared to try something out - if you get something wrong, nothing bad will happen.</p>\n<p>Try doing some more calculations now. You can multiply numbers with <code>*</code>, divide with <code>/</code>, and subtract with <code>-</code>. You can also use parentheses, i.e. <code>(</code> and <code>)</code>.</p>",
          "<p>Excellent! Keep experimenting. When you're ready, click 'Next' to continue.</p>"
        ],
        "title": "Introducing The Shell"
      },
      {
        "step_texts": [
          "<p>Here's a tip: often you will want to re-run a previously entered bit of code, or a slightly modified version of it. You can copy and paste, but that's tedious and gets in the way of experimenting. A better method is to press the Up Arrow key on your keyboard. This will insert the previous line of code into the shell. Keep pressing it to go further back in your history, and if you go too far, press the Down Arrow key to go the other way. Try using it now.</p>"
        ],
        "title": "Navigating Shell History"
      },
      {
        "step_texts": [
          "<p>Python lets you do much more than calculate. In fact, we're not going to touch numbers or maths for a while. Instead, we're going to look at <em>strings</em>. Strings are essentially snippets of text. For example, enter the following into the shell, quotes (<code>'</code>) included:</p>\n<pre><code>'hello'\n</code></pre>",
          "<p>The shell simply gives the same thing back because there's nothing to further to calculate. <code>'hello'</code> is simply equal to <code>'hello'</code>.</p>\n<p>A string is a sequence of characters. A character is a single symbol such as a letter, number, punctuation, space, etc. In this case the string contains the 5 characters <code>hello</code>. The quotes are not part of the string - they are there to tell both humans and computers that this is a string consisting of whatever characters are between the quotes.</p>"
        ],
        "title": "Introducing Strings"
      },
      {
        "step_texts": [
          "<p>Strings can be added together using <code>+</code>, although this means something very different from adding numbers. For example, try:</p>\n<pre><code>'hello' + 'world'\n</code></pre>",
          "<p>You can see that <code>+</code> combines or joins two strings together end to end. Technically, this is called concatenation.</p>\n<p>Here's an exercise: change the previous code slightly so that the result is the string <code>'hello world'</code>, i.e. with a space between the words.</p>\n<p>By the way, if you get stuck, you can click the lightbulb icon in the bottom right for a hint.</p>",
          "<p>Well done! Any of the following are valid solutions:</p>\n<pre><code>'hello ' + 'world'\n'hello' + ' world'\n'hello' + ' ' + 'world'\n</code></pre>"
        ],
        "title": "Adding Strings"
      },
      {
        "step_texts": [
          "<p>To make interesting programs, we can't always manipulate the same values. We need a way to refer to values that are unknown ahead of time and can change - values that can vary. These are called <em>variables</em>.</p>\n<p>Run this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>",
          "<p>This creates a variable with the name <code>word</code> that refers to the string value <code>'Hello'</code>.</p>\n<p>Check now that this is true by simply running <code>word</code> in the shell by itself.</p>",
          "<p>Good. For comparison, run <code>'word'</code> in the shell by itself, with the quotes.</p>",
          "<p>As you can see, the quotes make all the difference. <code>'word'</code> is literally just <code>'word'</code>, hence it's technically called a <em>string literal</em>. On the other hand, <code>word</code> is a variable, whose value may be anything.</p>\n<p>Similarly, <code>'sunshine'</code> is <code>'sunshine'</code>, but what's <code>sunshine</code> without quotes?</p>",
          "<p>The answer is that <code>sunshine</code> looks like a variable, so Python tries to look up its value, but since we never defined a variable with that name we get an error.</p>"
        ],
        "title": "Introducing Variables"
      },
      {
        "step_texts": [
          "<p>Previously we made a variable called <code>word</code> with the value <code>'Hello'</code> with this code:</p>\n<pre><code>word = 'Hello'\n</code></pre>\n<p>Now make a variable called <code>name</code> whose value is another string. The string can be anything...how about your name?</p>",
          "<p>You can use variables in calculations just like you would use literals. For example, try:</p>\n<pre><code>'Hello ' + name\n</code></pre>",
          "<p>Or you can just add variables together. Try:</p>\n<pre><code>word + name\n</code></pre>",
          "<p>Oops...that doesn't look nice. Can you modify the code above so that there's a space between the word and the name?</p>",
          "<p>Perfect!</p>\n<p>Variables can also change their values over time. Right now <code>word</code> has the value <code>'Hello'</code>. You can change its value in the same way that you set it for the first time. Run this:</p>\n<pre><code>word = 'Goodbye'\n</code></pre>",
          "<p>Now observe the effect of this change by running <code>word + ' ' + name</code> again.</p>",
          "<p>Those quotes around strings are getting annoying. Try running this:</p>\n<pre><code>print(word + ' ' + name)\n</code></pre>",
          "<p>Hooray! No more quotes! We'll break down what's happening in this code later. For now just know that <code>print(&lt;something&gt;)</code> displays <code>&lt;something&gt;</code> in the shell. In particular it displays the actual content of strings that we usually care about, instead of a representation of strings that's suitable for code which has things like quotes. The word <code>print</code> here has nothing to do with putting ink on paper.</p>"
        ],
        "title": "Using Variables"
      },
      {
        "step_texts": [
          "<p>It's time to stop doing everything in the shell. In the top right you can see the <em>editor</em>. This is a place where you can write and run longer programs. The shell is great and you should keep using it to explore, but the editor is where real programs live.</p>\n<p>Copy the program below into the editor, then click the 'Run' button:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nprint(word + ' ' + name)\nword = 'Goodbye'\nprint(word + ' ' + name)\n</code></pre>",
          "<p>Congratulations, you have run your first actual program!</p>\n<p>Take some time to understand this program. Python runs each line one at a time from top to bottom. You should try simulating this process in your head - think about what each line does. See how the value of <code>word</code> was changed and what effect this had. Note that when <code>print</code> is used multiple times, each thing (<code>Hello World</code> and <code>Goodbye World</code> in this case) is printed on its own line.</p>\n<p>Some things to note about programs in the editor:</p>\n<ol>\n<li>The program runs in the shell, meaning that the variables defined in the program now exist in the shell with the last values they had in the program. This lets you explore in the shell after the program completes. For example, <code>name</code> now has the value <code>'World'</code> in the shell.</li>\n<li>Programs run in isolation - they don't depend on any previously defined variables. The shell is reset and all previous variables are cleared. So even though <code>word</code> currently exists in the shell, if you delete the first line of the program and run it again, you'll get an error about <code>word</code> being undefined.</li>\n<li>If you enter code in the shell and it has a value, that value will automatically be displayed. That doesn't happen for programs in the editor - you have to print values. If you remove <code>print()</code> from the program, changing the two lines to just <code>word + ' ' + name</code>, nothing will be displayed.</li>\n</ol>\n<p>I recommend that you check all of these things for yourself.</p>"
        ],
        "title": "Writing Programs"
      },
      {
        "step_texts": [
          "<p>Often you will use variables to store the results of calculations. This will help to build more complex programs. For example, try this program:</p>\n<pre><code>word = 'Hello'\nname = 'World'\nsentence = word + ' ' + name\nprint(sentence)\n</code></pre>",
          "<p>Now <code>sentence</code> has the value <code>'Hello World'</code> which can be used multiple times. Note that it will continue to have this value until it is directly reassigned, e.g. with another statement like <code>sentence = &lt;something&gt;</code>. For example, add these two lines to the end of the program:</p>\n<pre><code>word = 'Goodbye'\nprint(sentence)\n</code></pre>",
          "<p>Unlike a spreadsheet where formulas update automatically, a variable like <code>sentence</code> doesn't remember how it was calculated and won't change if the underlying values <code>word</code> or <code>name</code> are changed.</p>"
        ],
        "title": "Storing Calculations In Variables"
      },
      {
        "step_texts": [
          "<p>Good news! You've made it past the boring basics. We can start to write some interesting programs and have a bit of fun. One of the most powerful concepts in programming is the <em>loop</em>, which lets you repeat the same code over and over. Python has two kinds of loop: <code>for</code> loops and <code>while</code> loops. Here is an example of a for loop, try running this program:</p>\n<pre><code>name = 'World'\nfor character in name: print(character)\n</code></pre>",
          "<p>You can read the code almost like normal English:</p>\n<blockquote>\n<p>For each character in the string <code>name</code>, print that character.</p>\n</blockquote>\n<p>Each character is just a normal string. <code>character</code> is a normal variable that is given a new value before the code after the <code>:</code> runs. So the code above is equivalent to:</p>\n<pre><code>name = 'World'\n\ncharacter = 'W'\nprint(character)\n\ncharacter = 'o'\nprint(character)\n\ncharacter = 'r'\nprint(character)\n\ncharacter = 'l'\nprint(character)\n\ncharacter = 'd'\nprint(character)\n</code></pre>\n<p>Note that we could use a different variable name, <code>character</code> just makes it clearer.</p>\n<p>A for loop generally follows this structure:</p>\n<pre><code>for &lt;variable&gt; in &lt;collection&gt;: &lt;code to repeat&gt;\n</code></pre>\n<p>The <code>for</code>, <code>in</code>, and <code>:</code> are all essential.</p>"
        ],
        "title": "Introducing For Loops"
      },
      {
        "step_texts": [
          "<p>This example loop:</p>\n<pre><code>for character in name: print(character)\n</code></pre>\n<p>works, but actually it would usually (and should) be written like this:</p>\n<pre><code>for character in name:\n    print(character)\n</code></pre>\n<p>Specifically, the code to be repeated (known as the <em>body</em>) starts on a new line after the colon (<code>:</code>), and it must be <em>indented</em>, i.e. have some spaces before it. The code below without indentation is invalid, run it to see for yourself:</p>\n<pre><code>for character in name:\nprint(character)\n</code></pre>",
          "<p>The spaces are required to tell Python which lines of code belong to the body of the for loop. This is critical when the loop contains several lines, which it often will. For example, run this code:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>",
          "<p>There are two indented lines, so they're both part of the body, so <code>---</code> gets printed after each character. Now try running the same code without the indentation in the last line:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\nprint('---')\n</code></pre>",
          "<p>Since <code>print('---')</code> is not indented, it's not part of the loop body. This means it only runs once, after the whole loop has finished running. Both programs are valid, they just do different things.</p>\n<p>The program below is invalid. Both lines in the loop body are indented, but by different amounts. The first line starts with 4 spaces, the second line starts with 2. Try running it.</p>\n<pre><code>for character in name:\n    print(character)\n  print('---')\n</code></pre>",
          "<p>When you indent, you should always indent by 4 spaces. Any consistent indentation is actually acceptable, but 4 spaces is the convention that almost everyone follows. Note that the editor generally makes this easy for you. For example, if you press the 'Tab' key on your keyboard in the editor, it will insert 4 spaces for you.</p>"
        ],
        "title": "Indentation"
      },
      {
        "step_texts": [
          "<p>Time for some exercises! Modify this program:</p>\n<pre><code>name = 'World'\n\nfor character in name:\n    print(character)\n    print('---')\n</code></pre>\n<p>to instead output:</p>\n<pre><code>---W\n---o\n---r\n---l\n---d\n</code></pre>",
          "<p>Splendid! Now write a program which prints <code>name</code> once for each character in <code>name</code>. For example, for <code>name = 'Amy'</code>, it should output:</p>\n<pre><code>Amy\nAmy\nAmy\n</code></pre>\n<p>For <code>name = 'World'</code>, it should output:</p>\n<pre><code>World\nWorld\nWorld\nWorld\nWorld\n</code></pre>\n<p>By the way, you can set <code>name</code> to anything in the first line. Only the rest of the program after that will be checked.</p>",
          "<p>We're making really good progress! You're solving problems and writing new code!\nLet's keep making things more interesting.</p>"
        ],
        "title": "Basic For Loop Exercises"
      },
      {
        "step_texts": [
          "<p>Before we look at some more loops, we need to quickly learn another concept. Look at this program:</p>\n<pre><code>hello = 'Hello'\nprint(hello)\nhello = hello + '!'\nprint(hello)\n</code></pre>\n<p>What do you think the line <code>hello = hello + '!'</code> does? What do you think the program will output? Make a prediction, then run it to find out.</p>",
          "<p>Python doesn't care that <code>hello</code> is on both the left and the right of the <code>=</code>, it just does what it would always do if the variables were different: it calculates <code>hello + '!'</code> which at the time is <code>'Hello' + '!'</code> which is <code>'Hello!'</code>, and that becomes the new value of <code>hello</code>. If it helps, you can think of that line as split into two steps:</p>\n<pre><code>temp = hello + '!'\nhello = temp\n</code></pre>\n<p>or:</p>\n<pre><code>temp = hello\nhello = temp + '!'\n</code></pre>\n<p>This is very useful in a loop. Think about what this program will do, then run it:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>By the way, <code>''</code> is called the <em>empty string</em> - a string containing no characters.</p>",
          "<p>The details in the above program are important. What goes wrong if you swap the last two lines and run this program instead?</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    print(line)\n    line = line + char\n</code></pre>",
          "<p>The last character in <code>name</code> only gets added to <code>line</code> at the end of the loop, after <code>print(line)</code> has already run for the last time. So that character and the full <code>name</code> never get printed at the bottom of the triangle.</p>"
        ],
        "title": "Building Up Strings"
      },
      {
        "step_texts": [
          "<p>Modify this program:</p>\n<pre><code>name = 'World'\nline = ''\nfor char in name:\n    line = line + char\n    print(line)\n</code></pre>\n<p>to add a space after every character in the triangle, so the output looks like this:</p>\n<pre><code>W\nW o\nW o r\nW o r l\nW o r l d\n</code></pre>",
          "<p>Tremendous! Now modify the program so that each line is backwards, like this:</p>\n<pre><code>W\noW\nroW\nlroW\ndlroW\n</code></pre>",
          "<p>Brilliant!</p>\n<p>Code like:</p>\n<pre><code>line = line + char\n</code></pre>\n<p>is so common that Python lets you abbreviate it. This means the same thing:</p>\n<pre><code>line += char\n</code></pre>\n<p>Note that there is no abbreviation for <code>line = char + line</code>.</p>\n<p>Now use <code>+=</code> and a for loop to write your own program which prints <code>name</code> 'underlined', like this:</p>\n<pre><code>World\n-----\n</code></pre>\n<p>There should be one <code>-</code> for each character in <code>name</code>.</p>",
          "<p>Fantastic!</p>\n<p>By the way, when you don't need to use a variable, it's common convention to name that variable <code>_</code> (underscore), e.g. <code>for _ in name:</code>. This doesn't change how the program runs, but it's helpful to readers.</p>\n<p>Let's make this fancier. Extend your program to draw a box around the name, like this:</p>\n<pre><code>+-------+\n| World |\n+-------+\n</code></pre>\n<p>Note that there is a space between the name and the pipes (<code>|</code>).</p>",
          "<p>You're getting good at this! Looks like you need more of a challenge...maybe instead of putting a name in a box, the name should be the box? Write a program that outputs this:</p>\n<pre><code>+World+\nW     W\no     o\nr     r\nl     l\nd     d\n+World+\n</code></pre>",
          "<p>Sweet! You're really getting the hang of this! If you want, here's one more optional bonus challenge. Try writing a program that outputs:</p>\n<pre><code>W\n o\n  r\n   l\n    d\n</code></pre>\n<p>Or don't, it's up to you.</p>"
        ],
        "title": "Building Up Strings Exercises"
      },
      {
        "step_texts": [
          "<p>Here's some words you need to know:</p>\n<p>An <strong><em>expression</em></strong> is a piece of code that has a value. For example, in this line of code:</p>\n<pre><code>sentence = 'Hello ' + name\n</code></pre>\n<p>there are three expressions:</p>\n<ol>\n<li><code>'Hello '</code></li>\n<li><code>name</code></li>\n<li><code>'Hello ' + name</code></li>\n</ol>\n<p>By contrast, the full line <code>sentence = ...</code> is a <strong><em>statement</em></strong>. It's a command that tells the computer to perform an action. It has no value of its own. This means, for example, that you can't add statements together. This code is invalid:</p>\n<pre><code>(word = 'Hello') + (name = 'Bob')\n</code></pre>\n<p>Specifically, a statement like <code>sentence = ...</code> where a variable is given a value is called <strong><em>assignment</em></strong> - the value is <em>assigned to</em> the the variable.</p>\n<p>A program is a list of statements which are executed in order. A <code>for</code> loop is a <em>compound statement</em>, meaning it has a body of its own which contains other statements. Most statements will also contain expressions, and expressions can contain other smaller expressions, but expressions cannot contain statements.</p>\n<p>The process of calculating the value of an expression is called <strong><em>evaluation</em></strong> - note how it almost contains the word 'value'. The computer <em>evaluates</em> <code>1 + 2</code> to get the value <code>3</code>.</p>\n<p>The process of executing a loop is called <strong><em>iteration</em></strong>. Code like <code>for char in 'Hello':</code> is <em>iterating over</em> the string <code>'Hello'</code>. The fact that it's possible means that strings are <em>iterable</em>. By contrast, numbers are not iterable, which is exactly what Python will tell you if you try <code>for char in 3:</code>. Each run through the loop is <em>one iteration</em>, so in this example there will be 5 iterations.</p>"
        ],
        "title": "Basic Terminology"
      },
      {
        "step_texts": [
          "<p>Now we're going to learn how to tell the computer to make decisions and only run code\nunder certain conditions. For this we will need a new type of value. You've seen\nnumbers and strings, now meet <em>booleans</em>. There are only two boolean values:\n<code>True</code> and <code>False</code>. Try this program:</p>\n<pre><code>condition = True\nprint(condition)\ncondition = False\nprint(condition)\n</code></pre>",
          "<p>Booleans are meant to be used inside <em>if statements</em> (sometimes also called <em>conditionals</em>).</p>\n<p>Here is a simple example for you to run:</p>\n<pre><code>if True:\n    print('This gets printed')\n\nif False:\n    print('This does not')\n</code></pre>",
          "<p>Note how the code inside the first <code>if</code> statement ran, but not the second.</p>\n<p>In general, an <code>if</code> statement looks like this:</p>\n<pre><code>if &lt;condition&gt;:\n    &lt;body&gt;\n</code></pre>\n<p>where <code>&lt;condition&gt;</code> is any expression which evaluates to a boolean and <code>&lt;body&gt;</code> is an <strong>indented</strong> list\nof one or more statements. The structure is quite similar to a <code>for</code> loop. Note the colon (<code>:</code>) which\nis essential.</p>\n<p>When the computer sees <code>if &lt;condition&gt;:</code>, it checks if <code>&lt;condition&gt;</code> is <code>True</code>. If it is, it runs the body.\nIf not, it skips it and continues to the rest of the program.</p>\n<p>Here's a more interesting example for you to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence += '!'\nprint(sentence)\n</code></pre>",
          "<p>(Remember that <code>sentence += '!'</code> means <code>sentence = sentence + '!'</code>)</p>\n<p>Change <code>excited = True</code> to <code>excited = False</code> and run the program again to see what the difference is.</p>",
          "<p>Time for an exercise. Modify the program above to include an extra\nboolean parameter <code>confused</code>, so the program should start like this:</p>\n<pre><code>sentence = 'Hello World'\nexcited = False\nconfused = True\n</code></pre>\n<p>(<code>sentence</code> can be any string and the two booleans can be either <code>True</code> or <code>False</code>)</p>\n<p>When <code>confused</code> is true, the printed sentence should have a question mark added to the end.\nIf both <code>confused</code> and <code>excited</code> are true, the sentence should end with <code>!?</code>.</p>",
          "<p>Well done! This program can do 4 different things depending on how you combine <code>excited</code>\nand <code>confused</code>. Try them out if you want.</p>"
        ],
        "title": "Introducing If Statements"
      },
      {
        "step_texts": [
          "<p>Compound statements like <code>for</code> loops and <code>if</code> statements have bodies which are a list\nof inner statements. Those inner statements can be anything, including other compound statements.\nTry this example of a <code>for</code> loop inside an <code>if</code> statement for when you want to show\nthat you're <em>really</em> excited:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    new_sentence = ''\n    for char in sentence:\n        new_sentence += char\n        new_sentence += '!'\n    sentence = new_sentence\n\nprint(sentence)\n</code></pre>",
          "<p>Note how the body of the <code>if</code> statement (5 lines) is indented as usual, while the body\nof the <code>for</code> loop (2 lines) is indented by an additional 4 spaces in each line to show that\nthose lines are within the <code>for</code> loop. You can see the overall structure of the program\njust by looking at the indentation.</p>\n<p>Alternatively, you can put an <code>if</code> inside a <code>for</code>:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nnew_sentence = ''\nfor char in sentence:\n    new_sentence += char\n    if excited:\n        new_sentence += '!'\n\nsentence = new_sentence\nprint(sentence)\n</code></pre>\n<p>These two programs have the exact same result. However the first one is more efficient as it\nonly iterates over the string if it needs to, since when <code>excited = False</code> nothing changes.</p>"
        ],
        "title": "Combining Compound Statements"
      },
      {
        "step_texts": [
          "<p>Run this program:</p>\n<pre><code>sentence = 'Hello World'\n\ninclude = False\nnew_sentence = ''\nfor char in sentence:\n    if include:\n        new_sentence += char\n    include = True\n\nprint(new_sentence)\n</code></pre>",
          "<p>As you can see, it prints everything but the first character. Take some time to understand how this works.</p>\n<p>In fact, it's time to introduce a new tool to help you understand programs. Click the 'Snoop' button to run the same program while also showing what's happening.</p>",
          "<p>Tada! Scroll to the top of the terminal and let's walk through what snoop is showing you.\nIt starts out very straightforward:</p>\n<pre><code>    1 | sentence = 'Hello World'\n    3 | include = False\n    4 | new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The first lines are simply showing you the lines of the program that the computer ran.\nOn the left is the line number as seen in the editor.</p>\n<p>Running <code>for char in sentence:</code> assigns a value to the variable <code>char</code>, so snoop shows you that value.\nLines starting with <code>......</code> indicate a new variable or a change in the value of an existing variable.\nSuch lines will not be shown when they're redundant, which is why the snoop output doesn't start like this:</p>\n<pre><code>    1 | sentence = 'Hello World'\n ...... sentence = 'Hello World'\n    3 | include = False\n ...... include = False\n    4 | new_sentence = ''\n ...... new_sentence = ''\n    5 | for char in sentence:\n ...... char = 'H'\n</code></pre>\n<p>The next two lines are:</p>\n<pre><code>    6 |     if include:\n    8 |     include = True\n</code></pre>\n<p>What's important here is what's not showing: because <code>include</code> is <code>False</code>, line 7 (<code>new_sentence += char</code>) gets skipped. But then <code>include</code> is set to <code>True</code>, so the next iteration of the loop is different:</p>\n<pre><code>    5 | for char in sentence:\n ...... char = 'e'\n    6 |     if include:\n    7 |         new_sentence += char\n .............. new_sentence = 'e'\n</code></pre>\n<p><code>new_sentence += char</code> runs for the first time and the variable <code>new_sentence</code> gets a new value.</p>\n<p>Now modify the program to do the opposite: only print the first character, leave out the rest.</p>",
          "<p>Great job! You're working with increasingly complex programs.</p>"
        ],
        "title": "Understanding Programs With Snoop"
      },
      {
        "step_texts": [
          "<p>An <code>if</code> statement can optionally have an <code>else</code> part. Run this example:</p>\n<pre><code>condition = True\nif condition:\n    print('Yes')\nelse:\n    print('No')\n</code></pre>",
          "<p>Now change the first line to <code>condition = False</code> and run it again.</p>",
          "<p>Think of <code>else</code> as saying 'or else' or 'otherwise'. It means that if the condition in the <code>if</code>\nis false, then the body of the <code>else</code> will run instead. Whether the condition is true or false,\nexactly one of the two bodies will run.</p>\n<p>Here's a more interesting example to run:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\nif excited:\n    sentence = sentence.upper()\nelse:\n    sentence = sentence.lower()\nprint(sentence)\n</code></pre>",
          "<p><code>sentence.upper()</code> is a new kind of expression we haven't encountered yet. What's going on here is that <code>sentence</code> is a string and strings have various <em>methods</em> that let you conveniently calculate new values from them, including <code>upper</code> and <code>lower</code>. The names refer to uppercase (capital letters) and lowercase (small letters). <code>'Hello World'.upper()</code> evaluates to <code>'HELLO WORLD'</code>. It doesn't change the contents of <code>sentence</code> though, so you have to assign the new value again with <code>sentence = sentence.upper()</code>.</p>\n<p>Now change <code>excited</code> to <code>False</code> and run it again.</p>",
          "<p>Here's a broken program:</p>\n<pre><code>sentence = 'Hello World'\nexcited = True\n\nif excited:\n    char = '!'\nsentence += char\n\nprint(sentence)\n</code></pre>\n<p>Can you see the problem? If you run it, everything seems fine. What could go wrong?</p>\n<p>Spoilers below! Have you figured it out?</p>\n<p>What happens if you change <code>excited</code> to <code>False</code>?</p>",
          "<p>If <code>excited</code> is true then <code>char</code> is defined and everything runs fine. But otherwise\n<code>char</code> never gets assigned a value, so trying to use it in <code>sentence += char</code> fails.</p>\n<p>Fix this by adding an <code>else</code> clause to the <code>if</code> so that if <code>excited</code> is false, a full stop (<code>.</code>)\nis added to the end of the sentence instead of an exclamation mark (<code>!</code>).</p>",
          "<p>Time for a challenge!</p>\n<p>Write a program which, given a string <code>sentence</code>, prints a modified version with\nthe same letters, where the first letter is capitalised and the rest are lowercase.\nFor example, the output should be <code>Hello world</code> whether the input <code>sentence = 'hello world'</code>\nor <code>'HELLO WORLD'</code>.</p>",
          "<p>Excellent!!!</p>\n<p>One more exercise, and then you can relax. </p>\n<p>Write a program which prints <code>sentence</code> mockingly, e.g:</p>\n<pre><code>OnE MoRe eXeRcIsE, aNd tHeN YoU CaN ReLaX.\n</code></pre>\n<p>Every second character should be lowercased, the rest should be uppercase.</p>",
          "<p>Perfect! Take a moment to be proud of what you've achieved. Can you feel your brain growing?</p>"
        ],
        "title": "<code>if</code> and <code>else</code>"
      },
      {
        "step_texts": [
          "<p>There are several ways to obtain booleans without assigning them directly,\nwhich allows you to construct very useful <code>if</code> statements. In particular there\nare many <em>comparison operators</em> which compare the values of two expressions.\nThe most common is the equality operator which checks if two values are equal.\nIt's denoted by two equals signs: <code>==</code>. Try running this:</p>\n<pre><code>print(1 + 2 == 3)\nprint(4 + 5 == 6)\nprint('ab' + 'c' == 'a' + 'bc')\n</code></pre>",
          "<p>As you can see, if the values are equal, the equality expression evaluates to <code>True</code>,\notherwise it's <code>False</code>.</p>\n<p>Note the difference between the equality operator <code>==</code> and a single <code>=</code> which has different meanings,\nparticularly in assignment statements as you've seen them so far. What happens if you try\nremoving a single <code>=</code> from the previous program?</p>",
          "<p>Let's use <code>==</code> in an <code>if</code> statement. In this program, the <code>if</code> body runs only when <code>c</code> is the character <code>'s'</code>. See for yourself.</p>\n<pre><code>name = 'kesha'\nnew_name = ''\nfor c in name:\n    if c == 's':\n        c = '$'\n    new_name += c\n\nprint(new_name)\n</code></pre>",
          "<p>Now extend the program to also replace <code>e</code> with <code>3</code> and <code>a</code> with <code>@</code>.</p>",
          "<p>Well done!</p>"
        ],
        "title": "The Equality Operator"
      },
      {
        "step_texts": [
          "<p>Quick biology lesson! Most of the cells in your body contain your full genetic code in DNA.\nThis consists of strands of molecular units called nucleobases which come in four varieties:\nAdenine, Cytosine, Guanine, and Thymine, or ACGT for short.\nSo part of a single strand might be something like:</p>\n<pre><code>AGTAGCGTCCTTAGTTACAGGATGGCTTAT...\n</code></pre>\n<p>This will be paired with another strand where A is replaced by T and vice versa,\nand C is replaced by G and vice versa, e.g:</p>\n<pre><code>TCATCGCAGGAATCAATGTCCTACCGAATA...\n</code></pre>\n<p>The two strands are 'zipped' together into the famous double helix structure,\njoined by the matching A-T and C-G pairs. These pairings are essential in copying DNA when\ncells divide and reproduce. The double helix is unzipped and the code is transcribed\ninto its opposite version to make the copy.</p>\n<p>We're going to repeat that process. Let's try the same kind of program we just wrote:</p>\n<pre><code>dna = 'AGTAGCGTC'\nopposite_dna = ''\nfor char in dna:\n    if char == 'A':\n        char = 'T'\n    if char == 'T':\n        char = 'A'\n    if char == 'G':\n        char = 'C'\n    if char == 'C':\n        char = 'G'\n    opposite_dna += char\n\nprint(opposite_dna)\n</code></pre>",
          "<p>Oh dear, that doesn't quite work. <code>T</code> is changed to <code>A</code> but <code>A</code> isn't changed to anything.\nCan you see why?</p>\n<p>When <code>char == 'A'</code>, then the body <code>char = 'T'</code> does indeed run. But that means that the following\ncondition <code>char == 'T'</code> also passes and so <code>char = 'A'</code> and we're back where we started.\nWe need to only change <code>char</code> from <code>T</code> to <code>A</code> if <code>char</code> wasn't already <code>A</code> to begin with,\nmeaning <code>char == 'A'</code> was <code>False</code>. We can do that with an <code>else</code>, like so:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelse:\n    if char == 'T':\n        char = 'A'\n</code></pre>\n<p>Now fix the program to replace all characters correctly.</p>",
          "<p>Brilliant! You have mimicked what your own cells are constantly doing.</p>\n<p>An <code>if</code> inside an <code>else</code> can be replaced by a single keyword <code>elif</code>. For example,\nthe previous code can be changed to this:</p>\n<pre><code>if char == 'A':\n    char = 'T'\nelif char == 'T':\n    char = 'A'\nelif char == 'G':\n    char = 'C'\nelif char == 'C':\n    char = 'G'\n</code></pre>",
          "<p>It's common to have a chain of <code>elif</code> clauses when you want exactly one of many\nbodies to run, like in this case. In general, code like this:</p>\n<pre><code>if X:\n    ...\nelse:\n    if Y:\n        ...\n    else:\n        if Z:\n            ...\n        else:\n            ...\n</code></pre>\n<p>can be rewritten as:</p>\n<pre><code>if X:\n    ...\nelif Y:\n    ...\nelif Z:\n    ...\nelse:\n    ...\n</code></pre>\n<p>which is both shorter and saves you from unpleasant nested indentation.\nThe difference is only cosmetic: once the computer runs this code, it can't\ntell the difference between the two versions.</p>\n<p>Note that <code>elif</code>(s) can optionally be followed by one final <code>else</code>. We didn't include one\nin our DNA example, but we could add one to alert us to any unexpected characters\nin the input, or change <code>elif char == 'C':</code> to <code>else:</code> if we were confident\nabout the input being valid.</p>"
        ],
        "title": "Introducing <code>elif</code>"
      },
      {
        "step_texts": [
          "<p>The opposite of the equals operator <code>==</code> is the <em>not equals</em> operator <code>!=</code>. If you squint it sort of looks like \u2260. It evaluates to <code>True</code> when two values are...not equal. Try it for yourself in the shell.</p>",
          "<p>Here's a cute little program using <code>!=</code>:</p>\n<pre><code>sentence = \"The e key on my keyboard is broken\"\nnew_sentence = ''\nfor c in sentence:\n    if c != 'e':\n        new_sentence += c\nprint(new_sentence)\n</code></pre>",
          "<p>Other handy operators are <code>&lt;</code> (less than) and <code>&gt;</code> (greater than). For example, <code>a &lt; b</code> means \"<code>a</code> is less than <code>b</code>\". Try using one of these in the shell to compare two numbers.</p>",
          "<p>You can also use these operators to compare strings. If you arrange two strings in alphabetical order, the first one is 'less than' the second. See for yourself.</p>",
          "<p>Here's a practical example of <code>&lt;</code> in action for you to try:</p>\n<pre><code>percentage = 73\n\nif percentage &lt; 20:\n    grade = \"F\"\nelif percentage &lt; 40:\n    grade = \"D\"\nelif percentage &lt; 60:\n    grade = \"C\"\nelif percentage &lt; 80:\n    grade = \"B\"\nelse:\n    grade = \"A\"\n\nprint(grade)\n</code></pre>\n<p>Recall that <code>elif percentage &lt; 40</code> after <code>if percentage &lt; 20</code> means \"if the percentage wasn't less than 20 and also is less than 40\", so it will pass for all numbers from 20 to 39 inclusive. Similarly a 'C' is for percentages from 40 to 59, and an 'A' is for any number 80 and up.</p>",
          "<p>Now for an exercise: write a program that takes three variables <code>x1</code>, <code>x2</code>, and <code>x3</code>, and prints the value of the smallest one. So for:</p>\n<pre><code>x1 = 'Charlie'\nx2 = 'Alice'\nx3 = 'Bob'\n</code></pre>\n<p>it should print <code>Alice</code>.</p>",
          "<p>Marvelous!</p>\n<p>There are many ways this could be solved. Here's one solution:</p>\n<pre><code>if x1 &lt; x2:\n    if x1 &lt; x3:\n        first = x1\n    else:\n        first = x3\nelse:\n    if x2 &lt; x3:\n        first = x2\n    else:\n        first = x3\n\nprint(first)\n</code></pre>\n<p>Here's another:</p>\n<pre><code>first = x1\n\nif x2 &lt; first:\n    first = x2\n\nif x3 &lt; first:\n    first = x3\n\nprint(first)\n</code></pre>\n<p>These programs (and yours too) all work equally well with numbers and strings,\nbut not a mixture.</p>\n<p><code>&lt;</code> and <code>&gt;</code> evaluate to False if the compared values are equal. For example,\n3 is not less than 3, so <code>3 &lt; 3</code> and <code>3 &gt; 3</code> are both False.\nTo allow equal values, use <code>&lt;=</code> and <code>&gt;=</code>.\nAgain, if you squint, they look a bit like \u2264 and \u2265.\nNote that the <code>=</code> comes second - there are no such operators as <code>=&lt;</code> or <code>=&gt;</code>.\nTo remember this, read them out loud as \"less than or equal to\"\nand \"greater than or equal to\".</p>\n<p>In summary, the main comparison operators are <code>==</code>, <code>!=</code>, <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>, and <code>&gt;=</code>.\nIf you ever have doubts about what they do, play with them in the shell!</p>"
        ],
        "title": "Other Comparison Operators"
      },
      {
        "step_texts": [
          "<p>It's time to learn about a powerful new type of value called lists. Here's an example:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor word in words:\n    print(word)\n</code></pre>",
          "<p>A list is a <em>sequence</em> (an ordered collection/container) of any number of values.\nThe values are often referred to as <em>elements</em>.\nThey can be anything: numbers, strings, booleans, even lists! They can also be a mixture of types.</p>\n<p>To create a list directly, like above:</p>\n<ol>\n<li>Write some square brackets: <code>[]</code></li>\n<li>If you don't want an empty list, write some expressions inside to be the elements.</li>\n<li>Put commas (<code>,</code>) between elements to separate them.</li>\n</ol>\n<p>Here's another example of making a list:</p>\n<pre><code>x = 1\nthings = ['Hello', x, x + 3]\nprint(things)\n</code></pre>",
          "<p>As you saw above, lists are <em>iterable</em>, meaning you can iterate over them with a <code>for loop</code>.\nHere's a program that adds up all the numbers in a list:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9]\n\ntotal = 0\nfor number in numbers:\n    total += number\n\nprint(total)\n</code></pre>",
          "<p>Now modify the program so that it can add up a list of strings instead of numbers.\nFor example, given:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n</code></pre>\n<p>it should print:</p>\n<pre><code>Thisisalist\n</code></pre>",
          "<p>Optional bonus challenge: extend the program to insert a separator string <em>between</em> each word.\nFor example, given</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\nseparator = ' - '\n</code></pre>\n<p>it would output:</p>\n<pre><code>This - is - a - list\n</code></pre>\n<p>Lists and strings have a lot in common.\nFor example, you can add two lists to combine them together into a new list.\nYou can also create an empty list that has no elements.\nCheck for yourself:</p>\n<pre><code>numbers = [1, 2] + [3, 4]\nprint(numbers)\nnew_numbers = []\nnew_numbers += numbers\nnew_numbers += [5]\nprint(new_numbers)\n</code></pre>\n<p>With that knowledge, write a program which takes a list of numbers\nand prints a list where each number has been doubled. For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[6, 2, 8, 2, 10, 18, 4, 12, 10]\n</code></pre>",
          "<p>Great!</p>\n<p>When you want to add a single element to the end of a list, instead of:</p>\n<pre><code>some_list += [element]\n</code></pre>\n<p>it's actually more common to write:</p>\n<pre><code>some_list.append(element)\n</code></pre>\n<p>There isn't really a big difference between these, but <code>.append</code>\nwill be more familiar and readable to most people.</p>\n<p>Now use <code>.append</code> to write a program which prints a list containing only the numbers bigger than 5.</p>\n<p>For example, given:</p>\n<pre><code>numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5]\n</code></pre>\n<p>it would print:</p>\n<pre><code>[9, 6]\n</code></pre>",
          "<p>Fantastic! We're making great progress.</p>"
        ],
        "title": "Introducing Lists"
      },
      {
        "step_texts": [
          "<p>Exercise: write a program which takes a list and a value and checks\nif the list contains the value. For example, given:</p>\n<pre><code>things = ['This', 'is', 'a', 'list']\nthing_to_find = 'is'\n</code></pre>\n<p>it should print <code>True</code>, but for</p>\n<pre><code>thing_to_find = 'other'\n</code></pre>\n<p>it should print <code>False</code>.</p>",
          "<p>Nice!</p>\n<p>A typical solution looks something like this:</p>\n<pre><code>found = False\nfor thing in things:\n    if thing == thing_to_find:\n        found = True\n\nprint(found)\n</code></pre>\n<p>Your solution is probably similar. It's fine, but it's a bit inefficient.\nThat's because it'll loop over the entire list even if it finds the element at the beginning.\nYou can stop any loop using a <code>break</code> statement, like so:</p>\n<pre><code>for thing in things:\n    if thing == thing_to_find:\n        found = True\n        break\n</code></pre>\n<p>This is just as correct but skips unnecessary iterations and checks once it finds the element.\nYou can use snoop to see the difference.</p>"
        ],
        "title": "Using <code>break</code> to end a loop early"
      },
      {
        "step_texts": [
          "<p>Looping is great, but often you just want to retrieve a single element from the list at a known position.\nHere's how:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nprint(words[0])\nprint(words[1])\nprint(words[2])\nprint(words[3])\n</code></pre>",
          "<p>In general, you can get the element at the position <code>i</code> with <code>words[i]</code>. The operation is called <em>subscripting</em> or <em>indexing</em>, and the position is called the <em>index</em>.</p>\n<p>You've probably noticed that the first index is 0, not 1. In programming, counting starts at 0. It seems weird, but that's how most programming languages do it, and it's generally agreed to be better.</p>\n<p>This also means that the last index in this list of 4 elements is 3. What happens if you try getting an index greater than that?</p>",
          "<p>There you go. <code>words[4]</code> and beyond don't exist, so trying that will give you an error.</p>\n<p>By the way, you can get the number of elements in a list (commonly called the <em>length</em>) using <code>len(words)</code>.\nThat means that the last valid index of the list is <code>len(words) - 1</code>, so the last element is <code>words[len(words) - 1]</code>. Try these for yourself.</p>\n<p>So in general, the valid indices are:</p>\n<pre><code>[0, 1, 2, ..., len(words) - 2, len(words) - 1]\n</code></pre>\n<p>There's a handy built in function to give you these values, called <code>range</code>:</p>\n<pre><code>for i in range(10):\n    print(i)\n</code></pre>",
          "<p><code>range(n)</code> is similar to the list <code>[0, 1, 2, ..., n - 2, n - 1]</code>.\nThis gives us an alternative way to loop over a list:</p>\n<pre><code>words = ['This', 'is', 'a', 'list']\n\nfor index in range(len(words)):\n    print(index)\n    print(words[index])\n</code></pre>",
          "<p>Let's get some exercise! Given a list <code>things</code> and a value <code>to_find</code>,\nprint the first index of <code>to_find</code> in the list, i.e. the lowest number <code>i</code> such that\n<code>things[i]</code> is <code>to_find</code>. For example, for</p>\n<pre><code>things = ['on', 'the', 'way', 'to', 'the', 'store']\nto_find = 'the'\n</code></pre>\n<p>your program should print <code>1</code>.</p>\n<p>You can assume that <code>to_find</code> appears at least once.</p>",
          "<p>Nice!</p>\n<p>By the way, indexing and <code>len()</code> also work on strings. Try them out in the shell.</p>\n<p>Here's another exercise. Given two strings of equal length, e.g:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"World\"\n</code></pre>\n<p>print them vertically side by side, with a space between each character:</p>\n<pre><code>H W\ne o\nl r\nl l\no d\n</code></pre>",
          "<p>Incredible!</p>\n<p>Your solution probably looks something like this:</p>\n<pre><code>for i in range(len(string1)):\n    char1 = string1[i]\n    char2 = string2[i]\n    print(char1 + ' ' + char2)\n</code></pre>\n<p>This doesn't work so well if the strings have different lengths.\nIn fact, it goes wrong in different ways depending on whether <code>string1</code> or <code>string2</code> is longer.\nYour next challenge is to fix this problem by filling in 'missing' characters with spaces.</p>\n<p>For example, for:</p>\n<pre><code>string1 = \"Goodbye\"\nstring2 = \"World\"\n</code></pre>\n<p>output:</p>\n<pre><code>G W\no o\no r\nd l\nb d\ny  \ne\n</code></pre>\n<p>and for:</p>\n<pre><code>string1 = \"Hello\"\nstring2 = \"Elizabeth\"\n</code></pre>\n<p>output:</p>\n<pre><code>H E\ne l\nl i\nl z\no a\n  b\n  e\n  t\n  h\n</code></pre>",
          "<p>Magnificent! Take a break, you've earned it!</p>"
        ],
        "title": "Getting Elements at a Position"
      },
      {
        "step_texts": [
          "<p>It's time to expand your vocabulary some more.</p>\n<p><code>print</code> and <code>len</code> are <strong><em>functions</em></strong>. See for yourself:</p>\n<pre><code>print(len)\nprint(print)\n</code></pre>",
          "<p>An expression like <code>len(things)</code> or <code>print(things)</code> is a function <strong><em>call</em></strong> - when you write that, you are <strong><em>calling</em></strong> the function <code>len</code> or <code>print</code>. The fact that this is possible means that functions are <strong><em>callable</em></strong>:</p>\n<pre><code>print(callable(len))\n</code></pre>",
          "<p>Most things are not callable, so trying to call them will give you an error:</p>\n<pre><code>f = 'a string'\nprint(callable(f))\nf()\n</code></pre>",
          "<p>In the call <code>len(things)</code>, <code>things</code> is an <strong><em>argument</em></strong>. Sometimes you will also see the word <strong><em>parameter</em></strong>, which means basically the same thing as argument. It's a bit like you're giving the argument to the function - specifically we say that the argument <code>things</code> is <em>passed</em> to <code>len</code>, and <code>len</code> <em>accepts</em> or <em>receives</em> the argument.</p>\n<p><code>len(things)</code> will evaluate to a number such as 3, in which case we say that <code>len</code> <strong><em>returned</em></strong> 3.</p>\n<p>All calls have to return something...even if it's nothing. For example, <code>print</code>'s job is to display something on screen, not to return a useful value. So it returns something useless instead:</p>\n<pre><code>things = [1, 2, 3]\nlength = len(things)\nprinted = print(length)\nprint(printed)\n</code></pre>",
          "<p><code>None</code> is a special 'null' value which can't do anything interesting. It's a common placeholder that represents the lack of a real useful value. Functions that don't want to return anything return <code>None</code> by default. If you see an error message about <code>None</code> or <code>NoneType</code>, it often means you assigned the wrong thing to a variable:</p>\n<pre><code>things = print([1, 2, 3])\nlength = len(things)\n</code></pre>",
          "<p>A <strong><em>method</em></strong> is a function which belongs to a type, and can be called on all values of that type using <code>.</code>. For example, <code>upper</code> and <code>lower</code> are methods of strings, which are called with e.g. <code>word.upper()</code>:</p>\n<pre><code>word = 'Hello'\nprint(word.upper)\nprint(word.upper())\n</code></pre>",
          "<p>Another example is that <code>append</code> is a method of lists. But you can't use <code>.upper</code> on a list or <code>.append</code> on a string:</p>\n<pre><code>word = 'Hello'\nword.append('!')\n</code></pre>",
          "<p>The word 'attribute' in the error message refers to the use of <code>.</code> - the error actually comes just from <code>word.append</code>, without even a call.</p>"
        ],
        "title": "Terminology: Calling functions and methods"
      },
      {
        "step_texts": [
          "<p>Let's review how to work with lists. Suppose we have a list <code>nums = [1, 2, 3]</code>. You can use:</p>\n<ul>\n<li><strong><code>append</code></strong>: Add an element to the end of the list. <code>nums.append(4)</code> changes the list to <code>[1, 2, 3, 4]</code>.</li>\n<li><strong><code>len</code></strong>: Returns the number of elements. <code>len(nums)</code> is <code>3</code>.</li>\n<li><strong><code>range</code></strong>: <code>range(n)</code> is an object similar to the list of numbers from 0 to <code>n - 1</code>. In particular, <code>range(len(nums))</code> is like <code>[0, 1, 2]</code>.</li>\n<li><strong><code>subscripting</code></strong>: Get a value at an index. <code>nums[0]</code> is 1, <code>nums[1]</code> is 2, <code>nums[2]</code> is 3.</li>\n<li><strong><code>+</code></strong>: Concatenates lists. <code>nums + [4, 5]</code> is <code>[1, 2, 3, 4, 5]</code>.</li>\n</ul>\n<p>Here's some new things. Try them out in the shell.</p>\n<ul>\n<li><strong><code>subscript assignment</code></strong>: Set a value at an index. <code>nums[0] = 9</code> changes the list to <code>[9, 2, 3]</code>.</li>\n<li><strong><code>join</code></strong>: Add a list of strings with a separator in between. This is a method of strings (the separator) which takes an iterable of strings as an argument. <code>'--'.join(['apples', 'oranges', 'bananas'])</code> returns <code>'apples--oranges--bananas'</code>. You can also use an empty string if you don't want a separator, e.g. <code>''.join(['apples', 'oranges', 'bananas'])</code> returns <code>'applesorangesbananas'</code>. </li>\n<li><strong><code>sum</code></strong>: Add a list of numbers. <code>sum(nums)</code> is 6.</li>\n<li><strong><code>in</code></strong>: A comparison operator that checks if a value is in a list. <code>2 in nums</code> is <code>True</code>, but <code>4 in nums</code> is <code>False</code>.</li>\n<li><strong><code>index</code></strong>: Returns the first index of a value in a list. <code>[7, 8, 9, 8].index(8)</code> is 1. Raises an error if the value isn't there.</li>\n</ul>\n<p>You may recognise some of these from your exercises. I assure you that those exercises were not pointless, as you've now learned valuable fundamental skills. For example, you can use <code>in</code> to check if a list contains 5, but there's no similarly easy way to check for a number bigger than 5.</p>\n<p>It's useful to know these functions, but it's not easy to learn them all, and there's many more. A more important skill is being able to look things up. For example, here are some typical ways you might Google the above functions if you forgot their names:</p>\n<ul>\n<li><code>append</code><ul>\n<li>python add element to list</li>\n<li>python add item at end of list</li>\n</ul>\n</li>\n<li><code>len</code><ul>\n<li>python size of list</li>\n<li>python number of elements in list</li>\n<li>python how many characters in string</li>\n</ul>\n</li>\n<li><code>join</code><ul>\n<li>python combine list of strings with separator</li>\n<li>python add together list of strings with string in between</li>\n</ul>\n</li>\n<li><code>sum</code><ul>\n<li>python add list of numbers</li>\n<li>python total of numbers</li>\n</ul>\n</li>\n<li><code>in</code><ul>\n<li>python check if list contains value</li>\n<li>python test if list has element</li>\n</ul>\n</li>\n<li><code>index</code><ul>\n<li>python get position of element</li>\n<li>python get index of value</li>\n</ul>\n</li>\n</ul>\n<p>Let's practice this skill now. Find a function/method that returns the value in a list which is bigger than any other value. For example, given the list <code>[21, 55, 4, 91, 62, 49]</code>, it will return <code>91</code>. You should write the answer in the shell as a single small expression. For example, if you were looking for the function <code>sum</code>, you could write <code>sum([21, 55, 4, 91, 62, 49])</code>. Don't solve this manually with a loop.</p>",
          "<p>Good find! Let's do one more. If you have a list:</p>\n<pre><code>nums = [1, 2, 3, 4, 5]\n</code></pre>\n<p>You could write <code>nums.append(9)</code> and <code>nums</code> would change to:</p>\n<pre><code>[1, 2, 3, 4, 5, 9]\n</code></pre>\n<p>But suppose you don't want the 9 to be at the end, you want it to go between the second and third elements:</p>\n<pre><code>[1, 2, 9, 3, 4, 5]\n</code></pre>\n<p>Call the right function/method in the shell to do that.</p>",
          "<p>Perfect!</p>\n<p>It can also be useful to Google things like \"python list tutorial\", e.g. if:</p>\n<ul>\n<li>Googling a specific method has failed so you want to find it manually.</li>\n<li>You're still confused about lists after this course.</li>\n<li>It's been a while since you learned about lists and you need a reminder.</li>\n<li>You're struggling to solve a problem with lists and you need to go back to basics and strengthen your foundations.</li>\n</ul>\n<p>There are also ways to find information without any googling. Try <code>dir([])</code> in the shell.</p>",
          "<p><code>dir()</code> returns a list of the argument's attributes, which are mostly methods. Many will start with <code>__</code> which you can ignore for now - scroll to the end of the list and you'll see some familiar methods.</p>\n<p>Here are a few more useful functions/methods. Suppose <code>nums = [28, 99, 10, 81, 59, 64]</code></p>\n<ul>\n<li><strong><code>sorted</code></strong>: Takes an iterable and returns a list of the elements in order. <code>sorted(nums)</code> returns <code>[10, 28, 59, 64, 81, 99]</code>.</li>\n<li><strong><code>pop</code></strong>: Removes and returns an element at a given index. <code>nums.pop(3)</code> removes <code>nums[3]</code> (<code>81</code>) from the list and returns it. Without an argument, i.e. just <code>nums.pop()</code>, it will remove and return the last element.</li>\n<li><strong><code>remove</code></strong>: Removes the first occurrence of the given element. <code>nums.remove(10)</code> will leave <code>nums</code> as <code>[28, 99, 81, 59, 64]</code>. Raises an error if the value doesn't exist. Equivalent to <code>nums.pop(nums.index(10))</code>.</li>\n<li><strong><code>count</code></strong>: Returns the number of times the argument appears in the list. <code>[1, 2, 3, 2, 7, 2, 5].count(2)</code> is 3.</li>\n</ul>\n<p>You've already seen that <code>len</code> and subscripting work with strings, a bit as if strings are lists of characters. Strings also support some of the new methods we've learned, not just for characters but for any substring. For example:</p>\n<ul>\n<li><code>'the' in 'feed the dog and the cat'</code> is <code>True</code></li>\n<li><code>'feed the dog and the cat'.count('the')</code> is 2</li>\n<li><code>'feed the dog and the cat'.index('the')</code> is 5</li>\n</ul>\n<p>Note that in most cases, methods which modify a list in place (<code>append</code>, <code>insert</code>, <code>remove</code>) merely return <code>None</code>, while the remaining functions/methods return a new useful value without changing the original argument. The only exception is the <code>pop</code> method.</p>\n<p>Modifying a value directly is called <em>mutation</em> - types of values which can be mutated are <em>mutable</em>, while those that can't are <em>immutable</em>. Strings are immutable - they don't have any methods like <code>append</code> or even subscript assignment. You simply can't change a string - you can only create new strings and use those instead. That means that this is a useless statement on its own:</p>\n<pre><code>word.upper()\n</code></pre>\n<p>The string referred to by <code>word</code> isn't modified, instead <code>word.upper()</code> returned a new string which was immediately discarded. If you want to change the value that <code>word</code> refers to, you have to assign a new value to the variable:</p>\n<pre><code>word = word.upper()\n</code></pre>\n<p>Or you can use <code>word.upper()</code> immediately in a larger expression, e.g.</p>\n<pre><code>if word.lower() == 'yes':\n</code></pre>"
        ],
        "title": "Functions And Methods For Lists"
      },
      {
        "step_texts": [
          "<p>It's time to learn about another tool to explore programs. Put some code in the editor and then click the new \"Python Tutor\" button. Here's some example code if you want:</p>\n<pre><code>all_numbers = [2, 4, 8, 1, 9, 7]\n\nsmall_numbers = []\nbig_numbers = []\n\nfor number in all_numbers:\n    if number &lt;= 5:\n        small_numbers.append(number)\n    else:\n        big_numbers.append(number)\n\nprint(small_numbers)\nprint(big_numbers)\n</code></pre>\n<p>The button will open a new tab with a visualisation from <a href=\"http://pythontutor.com\">pythontutor.com</a>.\nThere you can navigate through the program step by step with the \"Prev\" or \"Next\" buttons, or drag\nthe slider left or right. You can also see the values of variables on the right.</p>"
        ],
        "title": "Understanding Programs With Python Tutor"
      },
      {
        "step_texts": [
          "<p>It's time to learn some technical details that are often misunderstood and lead to errors.\nRun this program:</p>\n<pre><code>list1 = [1, 2, 3]\nlist2 = [1, 2, 3]\n\nprint(list1)\nprint(list2)\nprint(list1 == list2)\n\nprint(list1 is list2)\n\nlist1.append(4)\n\nprint(list1)\nprint(list2)\n</code></pre>",
          "<p>This program is quite straightforward and mostly consists of things you're familiar with.\nWe create two variables which refer to lists.\nThe lists have the same elements, so they are equal: <code>list1 == list2</code> is <code>True</code>.</p>\n<p>But then there's a new comparison operator: <code>is</code>. Here <code>list1 is list2</code> is <code>False</code>.\nThat means that regardless of the two lists being equal,\nthey are still two separate, distinct, individual lists.\nAs a result, when you append 4 to <code>list1</code>, only <code>list1</code> changes.</p>\n<p>Now change <code>list2 = [1, 2, 3]</code> to <code>list2 = list1</code> and see what difference it makes.</p>",
          "<p>Now <code>list1 is list2</code> is <code>True</code>, because <em>there is only one list</em>, and the two variables\n<code>list1</code> and <code>list2</code> both refer to that same list. <code>list1.append(4)</code> appends to the one list\nand the result can be seen in both <code>print(list1)</code> and <code>print(list2)</code> because both lines\nare now just different ways of printing the same list.</p>\n<p>I recommend running both versions with Python Tutor to see how it visualises the difference.\nIn the second case, the two variables both have arrows pointing to a single list object.</p>\n<p><code>list2 = list1</code> doesn't create an eternal link between the variables. If you assign a new value\nto <em>either</em> of the variables, e.g. <code>list1 = [7, 8, 9]</code>, the other variable will be unaffected\nand will still point to the original list.</p>\n<p>Basically, an assignment like:</p>\n<pre><code>list2 = &lt;expression&gt;\n</code></pre>\n<p>means 'make the variable <code>list2</code> refer to whatever <code>&lt;expression&gt;</code> evaluates to'.\nIt doesn't make a copy of that value, which is how both variables can end up pointing to the same list.\nBut as we've learned before, <code>list2</code> doesn't remember <code>&lt;expression&gt;</code>, only the value.\nIt doesn't know about other variables.</p>\n<p>You can copy a list with the <code>copy</code> method:</p>\n<pre><code>list2 = list1.copy()\n</code></pre>\n<p>This will make the program behave like the first version again.</p>\n<p>If you come across this kind of problem and you're still having trouble understanding this stuff, read the essay <a href=\"https://nedbatchelder.com/text/names.html\">Facts and myths about Python names and values</a>.</p>"
        ],
        "title": "<code>==</code> vs <code>is</code>"
      },
      {
        "step_texts": [
          "<p>Consider this program. It loops through a numbers and removes the ones smaller than 10. Or at least, it tries to. I recommend running it with Python Tutor.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor i in range(len(numbers)):\n    number = numbers[i]\n    if number &lt;= 10:\n        numbers.pop(i)\nprint(numbers)\n</code></pre>\n<p>(remember that <code>numbers.pop(i)</code> removes the element from <code>numbers</code> at index <code>i</code>)</p>\n<p>As it runs, it clearly skips even looking at 7 or 3 and doesn't remove them, and at the end it fails when it tries to access an index that's too high. Can you see why this happens?</p>\n<p>The index variable <code>i</code> runs through the usual values 0, 1, 2, ... as it's supposed to, but as the list changes those are no longer the positions we want. For example in the first iteration <code>i</code> is 0 and <code>number</code> is 10, which gets removed. This shifts the rest of the numbers left one position, so now 7 is in position 0. But then in the next iteration <code>i</code> is 1, and <code>numbers[i]</code> is 8. 7 got skipped. </p>\n<p>We could try writing the program to use <code>remove</code> instead of <code>pop</code> so we don't have to use indices. It even looks nicer this way.</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nfor number in numbers:\n    if number &lt;= 10:\n        numbers.remove(number)\nprint(numbers)\n</code></pre>\n<p>But it turns out this does the same thing, for the same reason. Iterating over a list still goes through the indices under the hood.</p>\n<p>The lesson here is to <strong><em>never modify something while you iterate over it</em></strong>. Keep mutation and looping separate.</p>\n<p>The good news is that there are many ways to solve this. You can instead just loop over a copy, as in:</p>\n<pre><code>for number in numbers.copy():\n</code></pre>\n<p>Now the list being modified and the list being itererated over are separate objects, even if they start out with equal contents.</p>\n<p>Similarly, you could loop over the original and modify a copy:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = numbers.copy()\n\nfor number in numbers:\n    if number &lt;= 10:\n        big_numbers.remove(number)\nprint(big_numbers)\n</code></pre>\n<p>Or you could build up a new list from scratch. In this case, we've already done a similar thing in an exercise:</p>\n<pre><code>numbers = [10, 7, 8, 3, 12, 15]\nbig_numbers = []\n\nfor number in numbers:\n    if number &gt; 10:\n        big_numbers.append(number)\nprint(big_numbers)\n</code></pre>"
        ],
        "title": "Modifying While Iterating"
      }
    ],
    "user": {
      "developerMode": true,
      "email": "[email protected]"
    },
    "processing": false,
    "numHints": 0,
    "editorContent": "",
    "messages": [],
    "pastMessages": [],
    "showingPageIndex": 10,
    "requestingSolution": false,
    "solution": {
      "tokens": [],
      "maskedIndices": [],
      "mask": []
    }
  }
}