Slide 1 ----------- Part 1: Do you know about all the features of our online code editor? If not, this section is for you! Our online editor is the most remarkable aspect of the interactive coding experience. Slide 2 ----------- Part 1: Let us present all the features of the interactive code editor experience. Buckle up! Part 2: First, there is the section header with the status info. The green marbles represent sections in the course that you completed, yellow ones are still pending, while grey ones you never visited. You can also see the experience points you collected in this section. Part 3: Then, there is the presentation view, which you are watching now. Feel free to pause the presentation anytime to explore individual bits of the interface. Part 4: If you prefer text to video, you can see the transcript below the presentation. You can also print this transcript in the form of slides! Pretty cool, huh? Part 5: Then, there is a description that provides further information to the presentation, or summarises the presentation in the style of a lecture. Part 6: Some sections allow you to consult our handy assistant, Maggie! Maggie is using the power of Generative AI to provide helpful answers to any questions you might have about the content. Try it out! Slide 3 ----------- Part 1: If Maggie cannot answer your question, try asking your colleagues and community in the discussion section below! This may take some time to respond, but we 'll notify you of any answer to your mail! Part 2: Then, there is the text editor ... Part 3: On the top of the editor we see the file tabs, allowing you to switch to the file you wish to modify. Part 4: Below is the status line, showing any compilation errors you may encounter when modifying source code. If you log any messages to the console a handy console also appears here. Part 5: Below the editor is the result view. If your code produces any text or graphics, it will most probably appear here. Part 6: To run your code, please press the Run button. Part 7: You can also change the layout of this editor, if you prefer to see a bigger code editor instead of the presentation and description. Slide 4 ----------- Part 1: This is the layout with a big code editor. Part 2: To switch between result view and instructions, please use these two handy tabs, that only appear in the big code view. Slide 5 ----------- Part 1: Last, some exercises come with automated tests. Part 2: The test result is displayed in the code result area, along with the error message of the failing test. Part 3: You can also debug your JavaScript / Typescript test. Make sure your browser console is opened before debugging your code. Part 4: You can also resize the interface according to your needs. Always look for the handy resize labels with three dots, such as this one ... Part 5: .. or this one! Slide 6 ----------- Part 1: It is time to complete our exercise. Part 2: Please see the error message from your test, telling you that the sum function does not exist. Let's fix that! Slide 7 ----------- Part 1: We will need to write some code to complete the exercise. Part 2: Please , type the following code in the code editor window. Part 3: Then, click on the Run button. Part 4: If you did everything right, you should see the green success message coming from your tests ... Part 5: And also the section indicator will turn green Slide 8 ----------- Part 1: That's it! Now go and have some fun working on the interactive SkillPies exercises!