fix(Introduction): Restoring Navigation Around

Closes EDC-369

Author: Geravant

Introduction/Course View/edu_course_view.png

@@ -0,0 +1,3 @@
+if __name__ == "__main__":
+    # Write your solution here
+    pass

Introduction/Course View/main.py

@@ -0,0 +1,6 @@
+type: theory
+files:
+- name: main.py
+  visible: true
+- name: edu_course_view.png
+  visible: false

Introduction/Course View/task-info.yaml

@@ -0,0 +1,18 @@
+## Course View
+
+<b>Course View</b> shows you the course syllabus: a list of lessons with tasks.
+
+<style>
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>
+<img src="edu_course_view.png" class="center" width="75%"/>
+
+You can navigate to any task by double-clicking its name.
+
+To hide the Course View window, click the Project Tool Window button or press <span style="color: #509DD6">&shortcut:ActivateProjectToolWindow;</span>. This will give you more space for the Editor and Task Description windows.
+
+To show the hidden Course View window, click the Project Tool Window button (or press <span style="color: #509DD6">&shortcut:ActivateProjectToolWindow;</span>) again.

Introduction/Course View/task.md

@@ -0,0 +1,3 @@
+if __name__ == "__main__":
+    # Write your solution here
+    pass

Introduction/Editor/edu_context_menu_run.png

@@ -0,0 +1,8 @@
+type: theory
+files:
+- name: main.py
+  visible: true
+- name: edu_context_menu_run.png
+  visible: false
+- name: edu_editor.png
+  visible: false

Introduction/Editor/edu_editor.png

@@ -0,0 +1,22 @@
+## Editor
+
+The <b>Editor</b> is your playground where you will be programming. You can experiment here while you work on the theoretical tasks and quizzes without being checked.
+
+For programming assignments, the Editor is where you’ll fix the existing code or write your own code from scratch. This code will be checked.
+
+<style>
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>
+<img src="edu_editor.png" class="center" width="100%"/>
+
+
+To run your code at any time, choose the Run option from the context menu or press <span style="color: #509DD6">&shortcut:Run;</span>:
+
+<img src="edu_context_menu_run.png" class="center" width="100%"/>
+
+
+If you want to go back to the Editor and focus on your code, the fastest way to do it is with the Hide All Windows command (<span style="color: #509DD6">&shortcut:HideAllWindows;</span>). To get all the windows back, repeat the command.

Introduction/Editor/main.py

@@ -0,0 +1,3 @@
+if __name__ == "__main__":
+    # Write your solution here
+    pass

Introduction/Editor/task-info.yaml

@@ -0,0 +1,6 @@
+type: theory
+files:
+- name: main.py
+  visible: true
+- name: edu_course_overview.png
+  visible: false

Introduction/Editor/task.md

@@ -0,0 +1,18 @@
+## EduTools plugin overview
+
+This lesson will help you take your first steps with the [EduTools plugin](https://www.jetbrains.com/help/education/educational-products.html) and use it to learn Python.
+
+With the EduTools plugin, you can learn programming languages and tools by completing coding tasks, and get instant feedback right inside the IDE.
+
+Enough talking – let's get started!
+
+If you're already familiar with the interface, you can skip this lesson.
+
+### Working with courses
+Every course available in EduTools is structured as a list of lessons. Lessons, in turn, can be grouped into sections. Each lesson contains several tasks.
+
+When you open a course, you will see the main tool windows used for navigation: <b>Course View</b>, <b>Editor</b>, and <b>Task Description</b>:
+
+<img src="edu_course_overview.png" width="100%"/>
+
+Click the "Next" button to navigate to the next task.

Introduction/Navigating Around/edu_course_overview.png

@@ -0,0 +1,3 @@
+if __name__ == "__main__":
+    # Write your solution here
+    pass

Introduction/Navigating Around/main.py

@@ -0,0 +1,22 @@
+type: theory
+files:
+- name: main.py
+  visible: true
+- name: images/back.svg
+  visible: false
+- name: images/commentTask.svg
+  visible: false
+- name: images/edu_next_button.png
+  visible: false
+- name: images/edu_peek_solution.png
+  visible: false
+- name: images/reset.svg
+  visible: false
+- name: images/forward.svg
+  visible: false
+- name: images/gear.svg
+  visible: false
+- name: images/hideToolWindow.svg
+  visible: false
+- name: images/edu_task_description_window_settings.png
+  visible: false

Introduction/Navigating Around/task-info.yaml

@@ -0,0 +1,41 @@
+## Task Description
+
+The **Task Description** window gives you all the information you need to complete a task:
+
+For theoretical tasks, the description provides learning and reading materials.
+For quizzes, it offers multiple choice questions.
+For programming assignments, it states the problem to be solved.
+
+Use the Task Description icons for the following actions:
+
+| Icon                               | Description                   |
+|------------------------------------|-------------------------------|
+|**Check**                           | <font size="-1">Check the correctness of your answer (for a quiz) or your code solution (for a programming task)</font>|   
+| **Run**                            | <font size="-1">Run your code (for a theoretical tasks)</font>|
+|![](images/back.svg)                | <font size="-1">Go to the previous task</font>       |    
+|![](images/forward.svg) &nbsp;<font size="-1">or</font> **Next** | <font size="-1">Go to the next task</font>| 
+|![](images/reset.svg)               | <font size="-1">Discard all the changes you’ve made in the task, and start over</font>| 
+|![](images/commentTask.svg)         | <font size="-1">View the task page on Stepik and leave a comment</font>| 
+|<a>Peek Solution...</a>             | <font size="-1">Reveal the correct answer and show the <b>diff</b></font>|
+
+We recommend keeping the Task Description window visible and not hiding it completely. If it is too distracting, you can hide it by clicking the ![](images/hideToolWindow.svg) button in the top right-hand corner of the Task Description window.
+
+If you use two monitors, it may be helpful to switch the Task Description panel to the floating mode and move it to the second monitor, or just place it near the main IDE window. To do this, click the tool window settings ![](images/gear.svg) icon :
+
+<img src="images/edu_task_description_window_settings.png" width="85%"/>
+
+<style>
+img {
+  display: inline !important;
+}
+table, th, td {
+  border: 1px solid black;
+  border-collapse: collapse;
+}
+th, td {
+  padding: 5px;
+}
+table td:nth-child(1) {
+    text-align: center;
+}
+</style>

Introduction/Navigating Around/task.md

@@ -1,3 +1,7 @@
 content:
+- Navigating Around
+- Course View
+- Editor
+- Task Description
 - Our first program
 - Comments

Introduction/Task Description/images/back.svg

@@ -0,0 +1,14 @@
+# Introduction to Python course  (Educational Products version) [![official JetBrains project](http://jb.gg/badges/official.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
+<p>This is an introductory Python course by JetBrains Educational Products.
+  The target audience are the people with little or no experience in programming who
+  would like to start learning Python.</p>
+
+  <p>In this course, you will learn about the basics, such as variables and operations
+  with them, strings and other data structures, boolean operators, conditions, control
+  flow, and so on. You will try implementing loops, functions, and classes, as well as
+  using parts of your code as imported modules, and working with text files.</p>
+
+  <p>Have fun and good luck!</p>
+
+  <p>P.S. Want to contribute? Feel free to send a pull request to this course’s
+  <a href=”https://github.com/jetbrains-academy/introduction_to_python”>git repo</a>.</p>