diff --git a/app/assets/markdown/cs1.md b/app/assets/markdown/cs1.md new file mode 100644 index 000000000..417ba1536 --- /dev/null +++ b/app/assets/markdown/cs1.md @@ -0,0 +1,411 @@ +###### Last updated: 08/23/2016 + +##### Lesson Plans +# Introduction to Computer Science + +### Curriculum Summary +- Level: Beginner +- 4 x 45-60 minute coding sessions + + +#### Overview +With the right environment, learning the basics of formal syntax and typing code can be fun and intuitive for students as early as 3rd grade. Instead of block-based visual programming languages that hinder a student’s proper understanding of code, CodeCombat introduces real coding from the very first level. By strengthening their typing, syntax and debugging skills, we empower students to feel capable of building real programs successfully. + +_This guide is written with Python-language classrooms in mind, but can easily be adapted for JavaScript._ + +### Scope and Sequence + +| Module | Levels | Transfer Goals | +| ----------------------------------- |:-----------------|:-----------------| +| [1. Basic Syntax](#basic-syntax) | 1-6 |Call functions in order| +| [2. Loops](#loops) | 7-14 |Repeat code sequences| +| [3. Variables](#variables) | 15-20 |Save and access data| +| [4. Review](#review-arena) | 21 |Master syntax and sequencing| + +### Core Vocabulary + +**Basic Syntax** - the basic spelling and grammar of a language, and must be carefully paid attention to in order for code to properly execute. For example, while Python and Javascript are used to do similar things in Course 1, the syntax for them is noticeably different, because they are different programming languages. + +**Object** - a character or thing that can perform actions. + +**String** - a type of programming data that represents text. In both Python and Javascript, strings are represented by text inside quotes. In Course 1, strings are used to identify objects for the hero to attack. + +**Function** - an action performed by an object. + +**Argument** - extra information passed into a method in order to modify what the method does. In both Python and Javascript, arguments are represented by code that is inside the parentheses after a method. In Course 1, arguments must be used to define enemies before the hero can attack them, and can also be used to move multiple times without writing new lines of code. + +**Property** - data about or belonging to an object. + +**While Loop** - used to repeat actions without the player needing to write the same lines of code over and over. In Python, the code that is looped must be indented underneath the while true statement. In Javascript, the code that is looped must be enclosed by curly brackets {}. In Course 1, while loops repeat forever, and are used to navigate mazes made up of identical paths, as well as attack objects that take a lot of hits to defeat (strong Doors, for example). + +**Variable** - a symbol that represents data, and the value of the variable can change as you store new data in it. In Course 1, variables are used to first define an enemy, and then passed along as an argument to the attack method so that the hero can attack the right enemy. + +##### Module 1 +## Basic Syntax  +### Summary + +The puzzles in these levels are framed as mazes for students to solve using Computational Thinking and computer programming. They are designed to be a gentle introduction to Python syntax through a relatable medium.  + +The hero starts at a particular place and has to navigate to the goal without running into spikes or being spotted by ogres.  + +Some students may want to delete their code every time and only type the next step. Explain to them that the code must contain all the instructions from start to finish, like a story: it has a beginning, a middle, and an end. Every time you click Start, the hero returns to the beginning.  + +### Transfer goals + +- Use Python syntax +- Call functions +- Understand that order matters + +### Standards  + +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP6** Attend to precision. + +### Instructive Activity: Basic Syntax (10 mins) + +#### Explain (3 mins) + +**Syntax** is how we write code. Just like spelling and grammar are important in writing prose, syntax is important when writing code. Humans are good at figuring out what something means, even if it isn’t exactly correct, but computers aren’t that smart, and they need you to write with no mistakes.  + +code example: `hero.moveRight()` +vocabulary:   (object) (function) +read aloud: “hero dot move right” + +**Objects** are the building blocks of Python. They are things or characters that can perform actions. Your hero is an object. It can perform the moving actions. + +**Functions** are actions an object can do. `moveRight()` is a function. Function names are always followed by parentheses. The order of functions matters! + +#### Interact (5 mins): Recycling Robot + +Practice giving written instructions using Python functions in order. + +**Materials:** Desk or table, recycling bin, balls of paper to recycle + +You (the teacher) are going to be the robot that the class controls using functions. The goal of this exercise is for the class to collectively write a program like this:  + +``` python +teacher.pickUpBall() +teacher.turnRight() +teacher.moveForward() +teacher.moveForward() +teacher.turnLeft() +teacher.moveForward() +teacher.dropBall() +``` + +The experience should introduce them to Python syntax (including the dot between the object and function, and the parentheses at the end) and the importance of order in a sequence of instructions.  + +At the front of the class, set some scrunched up paper balls on a flat surface. Place the recycling bin a few steps away. Explain that you are a recycling robot, and the class’s job is to program you.  + +The robot is a Python object. What is your name in Python? Whatever you choose, make sure it starts with a lower-case letter. Write it on the board.  + +`teacher` + +To make the robot perform an action, you have to call a function. Write a dot after your object name, then decide as a class what the first action should be. After the dot, write the function name followed by empty parentheses. Off to one side, draw a “Run” button.   + +`teacher.pickUpBall()` + +Have a volunteer press the “Run” button to run the program and test that it works.  + +_It is important that you reset yourself and the paper balls every time the code is changed, and run the whole program from the beginning._ + +Invite students to add code to the program one at a time. If there is an error in the syntax, make a funny beeping sound and stop. Have the class work together to write and rewrite the program until you successfully get a ball in the recycling bin.  + +#### Reflect (2 mins) + +**Why is syntax important?** (It lets you be specific about exactly what you want to happen.) + +**Does order matter?** (yes) + +**Can a human understand the directions even if there’s a mistake in the syntax?** (sometimes) + +**Can a computer?** (no) + +### Coding Time (30-45 mins) + +**First time students will need to create accounts** +For additional information on helping students create account, see our [Teacher Getting Started Guide](http://files.codecombat.com/docs/resources/TeacherGettingStartedGuide.pdf). + +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Draw students’ attention to the instructions and tips. + +If student have trouble breaking the problem down, refer to the [Engineering Cycle Worksheet [PDF]](http://files.codecombat.com/docs/resources/EngineeringCycleWorksheet.pdf) to reinforce the steps to solving each puzzle. + +### Written reflection (5 mins) + +Select appropriate prompt(s) for the students respond to, referring to their notes. + +**Tell me how to play CodeCombat.** + +>You have to move to the gem without hitting the spikes. I learned that you have to type “hero.” then the moving code. You have to spell it right and put () at the end. But it shows you the things you can type and you can click on them instead. You click RUN to make it go. You can try as many times as you need. + +**What’s the difference between an object and a function?** + +>The object is the hero and she has functions that are things she can do. The object has a dot after it and the function has ().  + +**How can you tell when you’ve made a mistake in your code? How do you fix it?** + +>Sometimes the code doesn’t won’t run because there is a mistake in it. They put a red ! next to the mistake and try to help you. You have to read the code to figure out what’s wrong. + +**Why is your hero in the Kithgard Dungeon? What is your quest? Are you a good guy or a bad guy?** +_(write your own backstory)_ + +>I went into the Kithgard Dungeon to steal gems from the ogres. I need to get a lot of gems to pay the ransom for my village, otherwise a big bully monster will destroy it and my family will be homeless. I think I’m a good guy but the ogres probably think I’m bad because I’m stealing from them.  + + +##### Module 2 +## Loops + +### Summary + +Up to now, students have had to write long sequences of actions with no shortcuts. These levels introduce loops, which allow them to achieve more with fewer lines of code.  + +The puzzles in this section are harder to solve than in the first module. Encourage collaboration among your students, as they first must understand what their goal is, then devise a strategy for solving the level, then put that plan into action.  + +### Transfer Goals + +- Write an infinite loop +- Break a problem into smaller pieces +- Decide which parts of an action repeat + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP8** Look for and express regularity in repeated reasoning. + +### Instructive Activity: Loops (10 mins) + +#### Explain (3 mins) + +A **loop** is a way of repeating code. One way of writing loops uses the keyword _while,_ followed by an **expression** that can be evaluated as True or False. _while_ is a special word that tells the computer to evaluate (or solve) what comes after it, and then do the actions indented underneath until the expression becomes False. + +These levels in CodeCombat require an **infinite loop**, or a loop that repeats forever.  For that, we need an expression that is always true. Luckily, _True_ is a Python shortcut that always evaluates as True! + +Below, `while` is the keyword, and `True` is the expression +``` python +while True:  +    hero.moveRight()  # action +    hero.moveUp()     # another action +``` + +You can put as many lines of code as you want inside the loop. They all have to be indented with four spaces. That’s how Python knows they’re part of the loop. Indentation is an important part of Python! Whenever you have a problem with your code, check the indentation first.  + +#### Interact (5 mins) + +As a class, think of as many ways as possible of writing a repeating action in English. (Use the following examples if students have a hard time thinking of their own.)  + +Circle the English words that tell you it’s a loop. Rewrite these instructions using `while`. Check indentation. Label each part as keyword, expression, or action. Here are some examples to get you started: + +Keep walking **until** you get to the door. _While you are not at the door, keep walking._ +``` python +while door = 0:  +    walk() +``` + +Bounce the ball five **times**. _While bounces are less than 5, bounce the ball._ + +``` python +while bounces < 5 :  +    ball.bounce() +``` + +Put away **every** toy. _While there are still toys out, put a toy away._ + +``` python +while toys > 0:  +    putAway(toy) +``` + +Have students take turns writing, checking, and labelling the code until it becomes easy.  + +#### Reflect (2 mins) + +**What is a loop?** (a way of repeating actions) + +**What is an expression?** (something that is True or False, usually using =, <, or >) + +**How do you write a loop that never ends?** (Use `while True`) + +### Coding Time (30-45 mins) + +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Draw students’ attention to the instructions and tips. + +Focus on debugging, employing appropriate strategies for getting yourself unstuck. Use your class/school’s growth mindset guidelines, use the [Engineering Cycle Worksheet [PDF]](http://files.codecombat.com/docs/resources/EngineeringCycleWorksheet.pdf) as an unblocking tool, or ask them to follow this list: + +1. Read the comments line by line +2. Read your code line by line +3. Read the hints +4. Explain the problem you’re having to a neighbor +5. Press the reload button and try again +6. Ask the teacher + +### Written Reflection (5 mins) + +**Tell me how you used a shortcut to save time and effort.** + +>I used while True to make my code repeat forever. I had to remember to put four spaces on each line. It’s good because you don’t have to type all the code.  + +**What are the things you have to remember to write an infinite loop?** + +>You have to type while True, and remember to put a : after it. On the next line, put four spaces before your code. If you want more than one line to repeat, they all have to have four spaces.  + +**Can you give me tips about solving these kinds of levels? Give an example.** +>You have to see what are the things that repeat. Sometimes it is just one thing, and sometimes it is lots of things. For example, in the Haunted Kithmaze you go to a dead end if you just put moveRight() in the loop because it just goes right, right, right forever. You also have to do moveUp() so it goes right, up, right, up.  + + +##### Module 3 +## Variables + +### Summary + +These levels introduce the game mechanic of attacking. Attacks will not work unless you specify whom to attack (`hero.attack()` is wrong; `hero.attack(jeremy)` is correct.)  + +Some of these puzzles can be hard for some students to wrap their heads around. Make sure they read the instructions thoroughly and understand the goal of each level. The challenge depends on not knowing the names of the objects you want to manipulate. Think of variables like nicknames for referring to objects when you don’t know what else to call them.   + +### Transfer Goals +- Create a variable +- Use a variable as an argument +- Choose appropriate variable names + +### Standards + +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP2** Reason abstractly and quantitatively. + +### Instructive Activity: Variables (10 mins) + +#### Explain (3 mins) + +A **variable** holds your data for later. You make a variable by giving it a name, then saying what **value** it should hold.  + +`enemy = “Kratt”` +The variable `enemy` holds (`=`) the value `"Kratt"` + +Now you can use your variable instead of the value itself! + +`hero.attack(“Kratt”)` is the same as `hero.attack(enemy)` + +So a variable can stand in for a value.  + +Variables can also be changed and checked. You could say `score = 0`, and then later `score = 1`. Or you could use your variable is in the expression for loop, i.e. `while score < 10`:  + +#### Interact (5 mins) + +As a class, discuss your preconceptions of the word “variable.”  + +In math, it is a symbol that stands in for a number, which you are usually solving for. + +In science, it’s a part of an experiment that can change and be observed.  + +Which aspects of coding variables are like the math kind, and which are like science?  + +#### Reflect (2 mins) + +**How do you create a variable?** (variable = something) + +**What can you use a variable for?** (Standing in for a value, checking it in a loop) + +**Can you use a variable before you create it?** (No, it won’t exist yet!) + +### Coding Time (30-45 mins) + +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Draw students’ attention to the instructions and tips. + +Focus on clearly communicating the goal of the level, and describing the problem they are currently facing. Remind students to read their code from start to end before asking you for help. Most problems can be solved by inserting missing quotation marks or fixing indentation.  + +### Written Reflection (5 mins) + +**What was the hardest puzzle you solved today? How did you solve it?** +>15 was a hard level. There were lots of enemies and I died. So I did a loop for attack, but I didn’t know the name of who to attack. So I clicked on the glasses and it said I could use `findNearestEnemy`, but it didn’t work without saying `enemy =`. Then I could `attack(enemy)` and it worked.  + +**Write a user manual for findNearestEnemy.** + +>The hero can see which enemy is closest by writing `hero.findNearestEnemy()`. But you have to remember which one it is in a variable. You can say `enemy = hero.findNearestEnemy()`. Then you can attack the enemy on the next line by saying `hero.attack(enemy)`.  + + +##### Module 4 +## Review: Arena +### Summary  + +The arena level is a reward for completing the required work. Students who have fallen behind in the levels or who have not completed their written reflections should use this time to finish. As students turn in their work, they can enter the Wakka Maul arena and attempt multiple solutions until time is called.  + +### Transfer Goals +- Write accurate Python syntax +- Debug Python programs +- Refine solutions based on observations + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP2** Reason abstractly and quantitatively. +**CCSS.Math.Practice.MP6** Attend to precision. + +### Coding Time (40-55 mins) + +Have students navigate to the last level, **Wakka Maul**, and complete it at their own pace.  + +#### Rankings** + +Once students beat the default computer they will be put in for the class ranking. Red teams only fight against blue teams and there will be top rankings for each. Students will only compete against the computer and other students in your CodeCombat class (not strangers). + +Note that the class rankings are plainly visible. If some students are intimidated by competition or being publicly ranked, give them the option of a writing exercise instead:  + +- Write a walkthrough or guide to your favorite level +- Write a review of the game +- Design a new level + +#### Dividing the Class + +Students must choose a team to join: Red or Blue.  It is important to divide the class as most students will choose red. It doesn’t matter if the sides are even, but it is important that there ARE players for both sides.  + +- Divide the class into two randomly by drawing from a deck of cards. +- Students who turn in their work early join the blue team, and latecomers play red. + +#### Refining the Code + +Code for Wakka Maul can be submitted more than once. Encourage your students to submit code, observe how it fares against their classmates, and then make improvements and resubmit. In addition, students who have finished the code for one team can go on to create code for the other team. + +### Reflect (5 mins) + +**Class discussion: How is coding a solution different from controlling a hero in real time?** + +You have been playing a game that requires you to think about a whole plan in advance, then let the hero carry out your instructions without intervention. This differs dramatically from the traditional way of playing video games by directly controlling the hero and making decisions while the game is running. Talk about how these differences feel. Which is more fun? Which is harder? How does your strategy change? How do you deal with mistakes?  diff --git a/app/assets/markdown/cs2.md b/app/assets/markdown/cs2.md new file mode 100644 index 000000000..d88102aa9 --- /dev/null +++ b/app/assets/markdown/cs2.md @@ -0,0 +1,609 @@ +###### Last updated: 08/23/2016 + +##### Lesson Plans +# Computer Science 2 + +### Curriculum Summary +- Recommended Prerequisite: Introduction to Computer Science +- 7 x 45-60 minute coding sessions + +#### Overview +Armed with basic knowledge of the structure and syntax of simple programs, students are ready to tackle more advanced topics. Conditionals, arithmetic, input handling, oh my! Computer Science 2 is where students move past the programming-toy stage into writing code similar to that they would use in the next major software or killer app! + +In Computer Science 2, students will continue to learn the fundamentals, (basic syntax, arguments, strings, variables, and loops) as well as being introduced to a second level of concepts for them to master. If statements allow the student to perform different actions depending on the state of the battlefield. Arithmetic will help players become more comfortable with using math in programming. All things in CodeCombat are objects, (that's the ‘object’ part of object-oriented programming,) and these things have accessible attributes, such as a Munchkin's position or a coin's value; both are important to begin visualizing the internal structure of the objects that make up their game world. Near the end of the Course there are some levels dedicated to input handling so the students can get introduced to the basic concept of events, and, well, it's just great fun, too! + + +_This guide is written with Python-language classrooms in mind, but can easily be adapted for JavaScript._ + +### Scope and Sequence + +| Module | Levels | Transfer Goals | +| ----------------------------------------------------- |:-----------------|:-----------------| +| [5. Conditionals (if)](#conditionals-if-) | 1-9 |Check expression before executing| +| [6. Conditionals (else)](#conditionals-else-) | 10-17 |Execute default code| +| [7. Nested Conditionals](#nested-conditionals) | 18-20 |Put one conditional inside another| +| [8. Functions](#functions) | 21-30 |Save code for later| +| [9. Properties](#properties) | 31-33 |Access information about objects| +| [10. Review and Synthesis](#review-and-synthesis) | 34-36 |Use appropriate vocabulary| +| [11. Code Challenge](#code-challenge) | 37 |Design and implement algorithms| + +### Core Vocabulary +**Object** - a character or thing that can perform actions. Objects are the building blocks of Python. They are things or characters that can perform actions. Your `hero` is an object. It can perform the moving actions. In `hero.moveRight()`, the object is `hero`. In Course 2, students will also be using the `pet` object to perform actions. + +**Function** - an action performed by an object. Functions are actions an object can do. `moveRight()` is a function. Function names are always followed by parentheses. + +**Argument** - additional information for a function. Arguments are what we put inside the parentheses of a function. They tell the function more information about what it should do. In `hero.attack(enemy)`, `enemy` is the argument. + +**Property** - data about or belonging to an object. You get to it by specifying the object, then a dot, then the name of the property. + +**Loop** - code that repeats. A loop is a way of repeating code. One way of writing loops uses the keyword `while`, followed by an expression that can be evaluated as `True` or `False`. + +**Variable** - a holder for data. A variable holds your data for later. You create a variable by giving it a name, then saying what value it should hold. + +**Conditional** - the building block of modern programming, the conditional. It’s named as such because of its ability to check the conditions at the moment and perform different actions depending on the expression. The player is no longer able to assume there will be an enemy to attack, or if there is a gem to grab. Now, they need to check whether it exists, check if their abilities are ready, and check if an enemy is close enough to attack. + +**Arithmetic** - Course 2 begins to ease the player into using math while coding. Levels catering to basic arithmetic address how to use math as needed in order to perform different actions effectively. + +**Input Handling** - Input handling allows players to finally interact with their hero in real-time. After submitting their code, the player will be able to dynamically add flags to the battlefield to assist their hero in solving tough challenges. It helps teach simple event handling as well as being quite fun! + + + +#### Extra activities for students who finish Course 2 early: +- Help someone else +- Write a walkthrough +- Write a review of the game +- Write a guide to their favorite level +- Design a new level + +##### Module 5 +## Conditionals (If) + +### Summary + +Course 2 introduces more advanced programming concepts, so the progress through the levels should be slower. Pay careful attention to the directions, so you know what the goal of the level is, and to the in-line comments (denoted with a `#`) so you know what code is missing. + +### Transfer Goals +- Construct a conditional +- Choose appropriate expressions +- Evaluate expressions + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP2** Reason abstractly and quantitatively. +**CCSS.Math.Practice.MP4** Model with mathematics. +**CCSS.Math.Practice.MP7** Look for and make use of structure. + +### Instructive Activity: Conditionals (10 mins) +#### Explain (2 mins) +Conditionals carry out code depending on the state of the game. They start by evaluating a statement as `True` or `False`, then they carry out the code only if the statement is `True`. Notice that the syntax is similar to a loop, since it needs a colon and a four-space indent. + +`if` is the keyword, and `==` is the expression +``` python +if enemy == “Kratt”: + attack(enemy) # This is the action +``` + +The keyword for a conditional is `if`. A conditional on its own will only happen once, but if you want it to keep checking, you have to put it inside a loop. Notice how the indentation works. + + +``` python +while true: + if enemy == “Kratt”: + attack(enemy) +``` + +#### Interact (5 mins) +Rewrite your classroom rules as conditionals using Python syntax. + +Identify some school or classroom rules, and write them on the board, e.g. +- Raise your hand to ask a question. +- You get a detention if you’re late. +- Stop talking when the teacher claps twice. + +Reformulate them in English to start with the word “If”, e.g. +- **If** you have a question, then raise your hand. +- **If** you’re late, then you get a detention. +- **If** the teacher claps twice, then stop talking. + +Now reformulate again using Python syntax, e.g. + +``` python +if student.hasQuestion(): + student.raise(hand) +``` +``` python +if student.ArrivalTime > class.startTime: + teacher.giveDetention(student) +``` +``` python +if teacher.claps == 2: + class.volume = 0 +``` + +Label each of the parts of the conditionals: *keyword*, *expression*, *action*. + +#### Explain (1 min) +Code is called code because we’re encoding our ideas into a language the computer can understand. You can use this three-step process of reformulating your ideas any time you’re writing code. As long as you know the syntax of the programming language, you know what the encoded idea should look like! + +#### Reflect (2 mins) +**Why do we need conditionals?** (Not all actions happen all the time) +**What is the part that comes between the if and the colon?** (an expression) +**What’s important about expressions?** (They have to be True or False) + + +### Coding Time (30-45 mins) +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Draw students’ attention to the instructions and tips. Students will need to use (x,y) coordinates to specify locations. Exact coordinates can be found by placing the mouse pointer over the target position. Students will also have to use a conditional to check if a condition is met before taking an action. + +### Written Reflection (5 mins) +**What does if mean? What kinds of things did you write after if?** +>If does the code only if it’s true. You can see if all kinds of things are true, like if your weapon is ready or if the enemy is close. Sometimes you need == or >, but sometimes you only need the (). + +**If you could design a CodeCombat level, what would it look like?** +>There would be lots of ogres and you have to attack them, but not the humans. And you would protect the village by building walls and fires. + + +##### Module 6 +## Conditionals (Else) +### Summary + +These levels have two things going on at once. Students have to decide under which condition to do each action. This is a good point to have a tips & tricks discussion, where any student who wants to share a discovery or shortcut with the class may present their advice. + +### Transfer Goals +- Construct an if-else conditional. +- Identify different actions taking place in different circumstances. +- Define `else` as the opposite of `if`. + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP2** Reason abstractly and quantitatively. +**CCSS.Math.Practice.MP7** Look for and make use of structure. +**CCSS.Math.Practice.MP8** Look for and express regularity in repeated reasoning. + +### Instructive Activity: Conditionals (Else) (10 mins) + +#### Explain (2 mins) +We’re used to using conditionals to do something if the expression is `True`, but what if it’s `False`? That’s where `else` comes in. `else` means “if not” or “otherwise” or “the opposite”. + +Notice that `else` must be indented the same number of spaces as the if it goes with. And it also needs a colon `:` just like `if`. + +Below, `if` and `else` are keywords, and `==` is the expression +``` python +if today == weekday: + goToSchool() # action +else: # keyword + watchCartoons() # action +``` + + +#### Interact (6 mins) +Revisit the classroom rules from the previous lesson and see if any need else statements, e.g. + +``` python +if student.hasQuestion(): + student.raise(hand) +else: + student.payAttention() +``` + +``` python +if student.ArrivalTime > class.startTime: + teacher.giveDetention(student) +else: + teacher.markPresent(student) +``` + +``` python +if teacher.claps == 2: + class.volume = 0 +# this doesn’t need an else because no action is taken if the teacher doesn't clap +``` + +Label the parts of these conditionals: _keywords_ (`if` and `else`), _expression_, _actions_ + +#### Reflect (2 mins) +**What does else mean?** (if not) +**Why doesn’t else come with another expression?** (the expression is implied-- it’s the opposite of the if, or when the if is False) +**Do you always need an else?** (no, it depends on the situation) + +### Coding Time (30-45 mins) +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Draw students’ attention to the instructions and tips. The crux of these levels is in deciding what should happen and when it should happen. Students have to entertain multiple possibilities to figure out what the best course of action is under every condition. + +### Written Reflection (5 mins) +**Do you know more code now than in the beginning? What powers do you have now that you couldn’t do before?** +>In the beginning I could just walk around. Now I can attack enemies and see who is closest. I can also put my mouse on the screen and see the coordinates of where to go. I can use if and else to do two different things. And I can use a loop to make my code repeat. + +**What advice can you give to someone just starting out the game?** +>Read the directions. First figure out what you want to do and then worry about the code. You have to put : after while True and if. And you have to use four spaces every time. Most of the time the level will tell you what to do in blue writing and you just have to do it. You can use your gems to buy stuff. + +**What do you do when you’re stuck?** +>I ask the person next to me if they have done this level. If I am ahead, I look at it some more until they catch up. Then we work on it together. Or I ask the teacher. Sometimes the answer is in the help or in the blue text. + +##### Module 7 +## Nested Conditionals +### Summary + +Serious coding starts now. Students will have to remember how to construct conditionals and expressions, or refer to the tips below the code editor. These levels have three or more actions to control, so they require complex thinking and planning. Up to three levels of indentation are used, so checking spaces is vital to writing code that runs. + +### Transfer Goals +- Construct a nested conditional +- Read and understand a nested conditional +- Attend to indentation + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP2** Reason abstractly and quantitatively. +**CCSS.Math.Practice.MP6** Attend to precision. +**CCSS.Math.Practice.MP7** Look for and make use of structure. + +### Instructive Activity: Nested Conditionals (10 mins) + +#### Explain (3 mins) +We started out with conditionals checking one thing before we took an action. Then we had two actions to do and had to decide which one to do when. But sometimes you have more than two things you want to do. That’s when you want to put a conditional inside another conditional. + +The first conditional below is `if it's a weekend`, the second (nested) conditional is `if I have a soccer game`. +``` python +if it’s a weekend: + if I have a soccer game: + Wake up at 6 + else: + Sleep in +else: + Wake up at 7 +``` + +Indentation starts to matter a lot now. We indent four spaces to put code inside a loop or conditional, and that includes other conditionals. The code inside the second conditional is indented a total of eight spaces. + +#### Activity (5 mins) +Have students write the rules of their wake-up times, bedtimes, or recess times as nested conditionals. Do at least three different actions, so you have to use a nested conditional. + +When they have finished, trade papers with a partner. Read each other’s schedules and discuss them. Check for syntax and indentation. + +Invite volunteers to share their finished schedules with the class. + +#### Reflect (2 mins) +**Why do we need nested conditionals?** (Because sometimes more than two different actions are possible) +**Why do we indent the second conditional by 4 spaces?** (To show that it is inside the first conditional.) +**What does it mean when an action is indented by 8 spaces?** (It depends on two expressions being True or False) + +### Coding Time (30-45 mins) +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Make sure students are reading all the comments in the starter code before they start making changes. The goals are complex, so understanding each sub-goal is important. Encourage collaboration and allow students to help each other. + +### Written Reflection (5 mins) +**Tell me about cleave.** +>Cleave smashes a bunch of enemies all around you. You do it by saying hero.cleave(). You have to put (), but you don’t need to say cleave(enemy). It just does it to everyone. Cleave takes a while to warm up, so you can check if it’s ready with the watch, and if it’s not ready yet just do a normal attack. + +**Debate: Is your hero a good guy or a bad guy?** +>My hero is sort of a good guy and sort of a bad guy. He is a good guy because he protects the villagers from getting hurt. But he is a bad guy because he stole the gems from the ogres in the dungeon. And he kills people. Maybe he should protect the people without killing and not steal. + +### Writing Checkpoint: Conditionals + +**What is a conditional? How many different ways can you write a conditional? Give an example.** +>A conditional asks “if.” You can say if something is true, then do something. You can use else if you want to do something if that first thing was not true. Elif is for if you want to do three things, like if it’s raining wear a jacket elif it’s snowing wear a hat else wear a t-shirt. You can put ifs inside other ifs but you have to remember the right number of spaces. + + +##### Module 8 +## Functions +### Summary +These levels give students the chance to take some shortcuts. Just like loops gave them the power to write more code quickly, functions enable reuse of code. Syntax remains vital; so check that colons and indentation are in the right place, and remember to read and understand the directions for each level before starting to code a solution. + +### Transfer Goals +- Identify functions. +- Construct a function definition. +- Call a function. + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP2** Reason abstractly and quantitatively. +**CCSS.Math.Practice.MP7** Look for and make use of structure. + +### Instructive Activity: Functions (10 mins) +#### Explain +You’ve been using functions already! When you type `hero.cleave()`, `cleave()` is a function. So far you’ve only been using built-in functions, but you can also write your own. First, you need to define the function using `def`. + +``` python +def getReady(): + hero.wash(face) + hero.brush(teeth) + hero.putOn(armor) +``` + +Then you need to call the function. + +``` python +getReady() +``` + +**What is the difference between defining and calling?** (Defining needs def before, and a colon after. Then it has some code indented under it. They both have parentheses.) + +Programmers use functions to make their code easy to read and quick to write. It’s sort of like a set play in basketball: you know how to shoot, dribble, and pass, so you can make up a function that combines those parts and give it a name. + +``` python +def out-over-up(): + p1.dribble() + p1.pass(p2) + p2.shoot() +``` + +Then when the coach wants this sequence of actions to happen, she just calls out the name of the play: “Out-over-up!” + +### Interact (5 mins) +**Simon Says.** + +As a class, write your own functions for complicated Simon Says moves on the board using Python syntax. Here are some examples to get you started: + +``` python +def pogo(): + student.handsOn(hips) + student.jump() +``` + +``` python +def popcorn(): + if student.sittingDown(): + student.standUp() + else: + student.sitDown() +``` + +Then, play Simon Says by calling the functions, e.g. +- Simon says raise your hand! +- Simon says popcorn! +- Pogo! (Simon didn’t say) + +### Reflect (2 mins) +**Why do functions make coding easier?** (Because you don’t have to say the complicated steps every time; you can just use the function name.) +**Why is it important to give your functions good names?** (So you can remember what they’re for later.) +**What does the keyword def stand for?** (define, or make) + +### Coding Time (30-45 mins) +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Draw students’ attention to the instructions and tips. +These levels are all about writing good code. The helper code that is given to you may have the word `pass` in it. This is just so the sample code doesn’t show any errors. Once the students fill in their code, they should delete `pass`. When you help debug their code, look for `pass` first. + +### Written Reflection (5 mins) + +**Tell me about the cat.** +>I got a pet cat and it’s a cougar or a lioness. There was a function that said meow, and the cat waited until you talked to it and then it said meow. I think the cat should help protect you from enemies. You should be able to make it do other stuff by commands, like pouncing and biting. + +**Why are functions useful? When would they not be useful?** +>They make it so you don’t have to write the same code over and over and they make your code easier to read. I don’t think it’s useful if you’re just going to put one line of code in your function. It would be easier just to write that one line every time. + + +##### Module 9 +## Properties +### Summary +Flags give the game a real-time element. Players may place flags on the game screen, and have their hero respond to them. Either click on the flag color, or use the first letter of the color, then click on the screen to place the flag. Use `hero.pickUpFlag()` to make the hero go to the flag and clear it. + +### Transfer Goals +- Access a property using dot notation. +- Save a property in a variable. +- Tell the difference between a property and a function. + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP2** Reason abstractly and quantitatively. +**CCSS.Math.Practice.MP4** Model with mathematics. + +### Instructive Activity: Properties (10 mins) +#### Explain (3 mins) +A property is something about an object. You get to it by specifying the object, then a dot, then the name of the property. To get the position of a flag, type: + +`flag.pos` + +This is similar to functions, because both functions and properties are things that belong to the object. Functions are like actions or verbs and properties are like aspects (adjectives) or possessions (nouns). + +Properties can have properties! Access them by adding another dot and another property. + +`flag.pos.x` + +Once you can get to a property, you can find out its value. Different flags have the same way of accessing their position properties, but those properties may have different values. + +#### Interact (5 mins) +Property interview: Give each student a turn to ask something about another student by querying one of their properties. Write the object name and property on the board using Python syntax (dot notation), e.g. + + `amy.age` + `victor.favoriteMovie` + `marcia.height` + `francisco.sister.name` + +When the syntax is correct, the queried student should should out the value of that property, e.g. + `12` + `“Die Hard”` + `4.5 feet` + `“Diana”` + +Note that everyone has an age property, and the same way of accessing it, but the values of that property are not the same for everyone! + +#### Reflect (2 mins) +**What’s a property?** (Something about an object) +**How can you tell the difference between a function and a property?** Functions have parentheses (), properties do not. +**Can two objects have the same property?** (yes) +**Do two objects’ properties always have the same value?** (no) + + +### Coding Time (30-45 mins) +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Draw students’ attention to the instructions and tips. Flags can be tricky for some students, so allow them to pair up to beat the levels. Each student should write their own code, but it’s ok for another student to place the flags for them. + +###Written Reflection (5 mins) +**How did you use properties today?** +>I had to see where the flag was and the flag has a property called pos. Then inside that it has two more properties, x and y. You use a dot to get inside the object, or inside the property. + +**Tell me about flags.** +>You use flags to tell the hero what to do when the game is running. You can write code to say if there’s a flag, then go to it. Flags have a pos that has x and y. X is right-left and y is up-down. + +##### Module 10 +## Review and Synthesis +###Summary +Read the instructions! Remember the hints! Sit and think about how to solve the problem and how you’ll be able to tell it’s solved. All the habits of mind of a good programmer come to bear on these levels: defining the problem, breaking the problem down into parts, making a plan, syntax and debugging, sticking to it, and asking for help. + +### Transfer Goals +- Use appropriate vocabulary +- Persist in solving a problem + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP6** Attend to precision. +**CCSS.Math.Practice.MP7** Look for and make use of structure. +**CCSS.Math.Practice.MP8** Look for and express regularity in repeated reasoning. + +### Instructive Activity: Review & Synthesis (10 mins) + +#### Interact (10 mins) +Review! As a class, try to remember all the new vocabulary words you learned so far. Decide on a definition and an example. Have students write these on the board and correct each other’s work. Consult the game where there are disputes. + +**Object** - a character or thing can can do actions, hero +**Function** - an action that an object can do, hero.cleave() +**Argument** - additional information for a function, hero.attack(enemy) +**Loop** - code that repeats, while True: +**Variable** - a holder for a value, enemy = ... +**Conditional** - code that checks if, if hero.isReady(): +**Property** - something about an object, flag.pos + + +### Coding Time (30-45 mins) +Allow the students to go through the game at their own pace, keeping notes about every level on paper or digital document. We recommend using following format, which you can also print out as templates: [Progress Journal [PDF]](http://files.codecombat.com/docs/resources/ProgressJournal.pdf) + +``` +Level #: _____ Level Name: ____________________________________ +Goal: __________________________________________________________ +What I did: + +What I learned: + +What was challenging: + + +``` + +Circulate to assist. Draw students’ attention to the instructions and tips. Students will need to call on everything they have learned so far. It’s important they understand the instructions in the comments. If they are stuck, have them read the comment out loud and explain what it means in their own words. That way, you can identify which part is giving them trouble. + +### Written Reflection (5 mins) + +**What is elif? Is it an elf?** +>Elif means else if. You use it to do three things instead of two with if. It’s like an elf because it’s tricky. + +**Tell me about spaces.** +>You use four spaces to make code go inside a while True, if, else, or elif. If an if is inside another if, you have to use eight spaces. It’s important to count the spaces and get them exactly right, or else the computer thinks you mean something different. You have to be really careful. + + +##### Module 11 +## Code Challenge +### Summary +This is a boss level! It will take all your ingenuity and collaboration to solve it. Have students work in pairs and share their tips with other teams. Make observations about the level on scratch paper, and then use them to make a plan. The goal of the level is to defeat the main boss, but you also have to collect coins, hire mercenaries, and heal your champion. The player area is in the bottom left, and the tents may be obscured by the status bar. Press SUBMIT to see the full screen. + +### Transfer Goals +- Design an algorithm to solve a problem. +- Implement an algorithm in Python. +- Debug a Python program. + +### Standards +**CCSS.Math.Practice.MP1** Make sense of problems and persevere in solving them. +**CCSS.Math.Practice.MP2** Reason abstractly and quantitatively. +**CCSS.Math.Practice.MP3** Construct viable arguments and critique the reasoning of others. +**CCSS.Math.Practice.MP5** Use appropriate tools strategically. +**CCSS.Math.Practice.MP6** Attend to precision. + +### Instructive Activity: Engineering Cycle (10 mins) +#### Explain (5 mins) +Engineering is all about solving problems, but the first rule of engineering is that no one gets it right the first time. That’s where the Engineering Cycle comes in: + +First, we DESIGN a solution to our problem. This includes figuring out what the problem is, and breaking it down into smaller parts. Then we IMPLEMENT this design, which putting our ideas into action with code. Third, we TEST our implementation. Does it work? Does it solve the problem? If our test fails, we have to decide if it was because of the DESIGN or the IMPLEMENTATION. + +Then we keep designing, implementing, and testing until it the problem is solved! + +#### Reflect (2 mins) +**What are the steps of the Engineering Cycle?** (Design, implement, test) +**When does the Engineering Cycle stop?** (When the problem is solved, or you run out of time) + +#### Interact (5 mins) +As a class, make a list of all the things your hero can do (functions). Use appropriate vocabulary. Annotate with any tips or code snippets the students deem useful. +`moveUp()`, `moveDown()`, `moveLeft()`, `moveRight()` +`moveToXY(x,y)` +`attack(something)` + +### Coding Time (30-45 mins) +Break into small campaign groups to solve the last level. + +**DESIGN**: In teams, make observations about the level. Make a list of requirements. Decide what part of the problem you will start with. +**IMPLEMENT**: Write the solution to that part of your problem in code. Tip: Use a different function to solve each part of the problem! +**TEST**: Does your code work? If not, fix your code. If it does, does it solve the right part of the problem? If not, redesign. If so, move on to the next part! + +### Written Reflection (5 mins) + +**Write a chronicle of your epic battle from the point of view of either the hero or the boss.** +>I am Tharin Thunderfist, the great hero of the battle of Cross Bones. Together with my guardian, Okar Stompfoot, I attacked the ogres and freed the valley from their tyranny. I gathered coins to pay archers and fighters to join the battle. Then I cured Okar when he was injured. + +**How did you break down the problem? What challenges did you come up against? How did you solve them? How did you work together?** +>First we saw that the code already did collecting coins. So we made it go to the tents when we could afford to hire fighters. Then we had to get the potion, but we messed up the code. The teacher helped us fix it. But we still didn’t win, so we asked another team for help and they showed us how to defeat the enemy. We worked well together. It was fun and hard. + +### Writing Checkpoint: What is code? +>Code is when you type instructions to make the computer do things. Sometimes it gives you hints and completes the words for you. You have to spell everything right and indent the right number of spaces. Sometimes the puzzles are easy and sometimes they are hard. You have to make a plan for how to solve it, and then write the code exactly to make it work. The language we used is called Python. It has while True: to make your code repeat and if, else, and elif to make different things happen at different times. diff --git a/app/locale/en.coffee b/app/locale/en.coffee index 8aa8ad4d6..1991b69fc 100644 --- a/app/locale/en.coffee +++ b/app/locale/en.coffee @@ -1523,11 +1523,21 @@ student_getting_started: "Student Quick Start Guide" student_getting_started_desc: "You can distribute this guide to your students before starting CodeCombat so that they can familiarize themselves with the code editor. This guide can be used for both Python and JavaScript classrooms." cs1: "Introduction to Computer Science" + cs2: "Computer Science 2" cs1_syntax_python: "Course 1 Python Syntax Guide" cs1_syntax_python_desc: "Cheatsheet with references to common Python syntax that students will learn in Introduction to Computer Science." cs1_syntax_javascript: "Course 1 JavaScript Syntax Guide" cs1_syntax_javascript_desc: "Cheatsheet with references to common JavaScript syntax that students will learn in Introduction to Computer Science." coming_soon: "Additional guides coming soon!" + engineering_cycle_worksheet: "Engineering Cycle Worksheet" + engineering_cycle_worksheet_desc: "Use this worksheet to teach students the basics of the engineering cycle: Assess, Design, Implement and Debug. Refer to the completed example worksheet as a guide." + engineering_cycle_worksheet_link: "View example" + progress_journal: "Progress Journal" + progress_journal_desc: "Encourage students to keep track of their progress via a progress journal." + cs1_curriculum: "Introduction to Computer Science - Curriculum Guide" + cs1_curriculum_desc: "Scope and sequence, lesson plans, activities and more for Course 1." + cs2_curriculum: "Computer Science 2 - Curriculum Guide" + cs2_curriculum_desc: "Scope and sequence, lesson plans, activities and more for Course 2." sharing: game: "Game" diff --git a/app/styles/teachers/ResourceHubView.sass b/app/styles/teachers/ResourceHubView.sass index dae0d105d..afaeed843 100644 --- a/app/styles/teachers/ResourceHubView.sass +++ b/app/styles/teachers/ResourceHubView.sass @@ -1,20 +1,19 @@ -#resource-hub-view, #markdown-resource-view +#resource-hub-view + .content + max-width: 900px + margin: auto - .content + h4 + padding: 0 0 10px 0 + + ul + margin: 0 0 40px 0 + p + font-size: .8em + + .comingsoon + h4 + text-align: center margin: 0 auto 0 auto - // padding: 50px - - .content - - h4 - margin: 20px 0 0 0 - - ul - margin: 0 0 50px 0 - - h4 - .comingsoon - text-align: center - margin: 0 auto 0 auto - color: #666 - margin: 30px 0 0 0 + color: #666 + margin: 30px 0 0 0 diff --git a/app/styles/teachers/markdown-resource-view.sass b/app/styles/teachers/markdown-resource-view.sass new file mode 100644 index 000000000..e81bc8e14 --- /dev/null +++ b/app/styles/teachers/markdown-resource-view.sass @@ -0,0 +1,109 @@ +#markdown-resource-view + .backlink + @media print + display: none + + .print, .print p + text-align: center + font-size: .75em + // text-transform: uppercase + @media print + display: none + + .print a + color: #fff + text-decoration: none + + .back-to-top + text-transform: none + @media print + display: none + + .lesson-plans + max-width: 900px + background-color: #f8f8f8 + border-radius: 10px + border: 1px solid #ddd + padding: 40px 100px + font-size: 0.85em + margin: 20px auto + @media print + max-width: none + border: none + margin: none + padding: none + font-size: 80% + + ul + margin: 0 0 30px 0 + + // page header // + h1 + font-size: 2.5em + margin: 0 + padding: 0 + font-family: Open Sans + font-weight: 200 + + // module header // + h2 + margin: 10px 0 0px 0 + + // section header // + h3 + font-size: 1.4em + margin: 20px 0 0 0 + + // section breakout // + h4 + font-size: 1.1em + font-weight: normal + color: #999 + + // lesson plans/module header // + h5 + color: #999 + text-transform: uppercase + font-family: Open Sans + font-size: 1em + padding: 0 + margin: 0 + + // make it so the page breaks before each module + h5[id^="module"] + border-top: 1px solid #666 + margin: 30px 0 0 0 + padding: 20px 0 0 0 + @media print + page-break-before: always + + h6 + font-style: italic + font-weight: 200 + text-align: right + + img + width: 100% + + table, tr, td, th + border: 2px solid #f8f8f8 + border-radius: 5px + background-color: #fff + + td, th + padding: 0 10px + + blockquote + padding: 5px + margin: 15px 0 30px 0 + + blockquote::before + content: none + + blockquote p + font-size: 1.0em + line-height: 1.7em + // font-style: italic + margin: 0 0 0 0px + padding: 0 60px 0 50px + border-left: 5px solid #eee diff --git a/app/templates/teachers/markdown-resource-view.jade b/app/templates/teachers/markdown-resource-view.jade index ab06644ed..9886f904e 100644 --- a/app/templates/teachers/markdown-resource-view.jade +++ b/app/templates/teachers/markdown-resource-view.jade @@ -5,4 +5,18 @@ block page_nav block content - .container!=view.content + .container + span.backlink + a(href='/teachers/resources') + |< Back to Resource Hub + if view.content == '' + .comingsoon + h4(style="text-align:center") + i This guide doesn't exist! + else + .print + .btn.btn-md.btn-navy + a(href='javascript:window.print()') + span.glyphicon.glyphicon-print   + |Print this guide + div(class='lesson-plans' id=view.name)!=view.content diff --git a/app/templates/teachers/resource-hub-view.jade b/app/templates/teachers/resource-hub-view.jade index ad5c599fa..c4f7c9464 100644 --- a/app/templates/teachers/resource-hub-view.jade +++ b/app/templates/teachers/resource-hub-view.jade @@ -23,10 +23,20 @@ block content span(data-i18n="teacher.student_getting_started") span.spl [PDF] p(data-i18n="teacher.student_getting_started_desc") + li + a(href="http://files.codecombat.com/docs/resources/ProgressJournal.pdf" target="blank") + span(data-i18n="teacher.progress_journal") + span.spl [PDF] + p(data-i18n="teacher.progress_journal_desc") + h4(data-i18n="teacher.cs1") ul + li + a(href="/teachers/resources/cs1" target="blank") + span(data-i18n="teacher.cs1_curriculum") + p(data-i18n="teacher.cs1_curriculum_desc") li a(href="http://files.codecombat.com/docs/resources/Course1PythonSyntaxGuide.pdf" target="blank") span(data-i18n="teacher.cs1_syntax_python") @@ -37,7 +47,22 @@ block content span(data-i18n="teacher.cs1_syntax_javascript") span.spl [PDF] p(data-i18n="teacher.cs1_syntax_javascript_desc") + li + a(href="http://files.codecombat.com/docs/resources/EngineeringCycleWorksheet.pdf" target="blank") + span(data-i18n="teacher.engineering_cycle_worksheet") + span.spl [PDF] + a(href="http://files.codecombat.com/docs/resources/WorksheetExample.pdf" target="blank") + i.span.spl(data-i18n="teacher.engineering_cycle_worksheet_link") + p(data-i18n="teacher.engineering_cycle_worksheet_desc") - h4 - .comingsoon + h4(data-i18n="teacher.cs2") + ul + li + a(href="/teachers/resources/cs2" target="blank") + span(data-i18n="teacher.cs2_curriculum") + p(data-i18n="teacher.cs2_curriculum_desc") + + + .comingsoon + h4 i(data-i18n="teacher.coming_soon") diff --git a/app/views/teachers/MarkdownResourceView.coffee b/app/views/teachers/MarkdownResourceView.coffee index 21f12b974..1c97aa9df 100644 --- a/app/views/teachers/MarkdownResourceView.coffee +++ b/app/views/teachers/MarkdownResourceView.coffee @@ -8,8 +8,11 @@ module.exports = class MarkdownResourceView extends RootView @content = '' $.get '/markdown/' + @name + '.md', (data) => if data.indexOf('') is -1 - @content = marked(data, sanitize: false) - else - @content = "

Not Found

" + i = 0 + @content = marked(data, sanitize: false).replace /<\/h5/g, () -> + if i++ == 0 + 'Back to top