User script for translating Code Monster and Code Maven to Hebrew [Work in progress]

codemonster.user.js

// ==UserScript==
// @name           Translate Code Monster and Code Maven to Hebrew - Work in progress
// @namespace      splintor.userscript.org
// @description    Translate Crunchzilla\'s Code Monster and Code Maven to Hebrew, using a feminine form. Still need to finish translating...
// @include        http://www.crunchzilla.com/*
// @author:        Shmulik Flint (splintor@gmail.com)
// @updateUrl      https://gist.github.com/splintor/375765738b6db548bb4f355e7fa35cd6/raw
// @version        0.8.6
// ==/UserScript==

const t = {
    'Getting Started': 'פתיחה',
    'I\'m Code Monster! (click on my words to see what\'s next)': 'אני תִכנוּתפלֶצֶת! (צריך ללחוץ על מה שאני אומרת כדי להתקדם)',
    'You\'re going to learn some programming! (click again)': 'תיכף נלמד פה קצת תכנות! (עכשיו צריך ללחוץ שוב)',
    'Below me, on the left, is Javascript code, on the right, what it does.': 'מתחתי, בצד שמאל, יש קוד Javascript, ובצד ימין יש את מה שהקוד הזה עושה.',
    'You can use fillRect() to draw a box. See the number 50?  Can you change that to 150?': 'את יכולה להשתמש ב-()fillRect כדי לצייר תיבה. רואה את המספר 50? את יכולה לשנות את זה ל-150?',
    'Parameters and Drawing': 'פרמטרים וציור',
    'That made the box wider. What do you think the other numbers do? Try changing them.': 'זה הפך את התיבה לרחבה יותר. מה לדעתך שאר המספרים עושים? נסי לשנות אותם',
    'Did you figure it out?  The numbers are how far from the left side to draw the box, how far from the top, how wide to draw the box, and how tall.': 'הבנת? המספרים קובעים כמה רחוק מצד שמאל, כמה רחוק מלמעלה, כמה רחבה תהיה התיבה וכמה גבוהה.',
    'Try changing all the numbers!  Play with it!': 'נסי לשנות את כל המספרים! שחקי עם זה!',
    'Two boxes. Can you change the numbers to make them bigger?': 'שתי תיבות. איך אפשר לשנות את המספרים כדי לעשות אותן גדולות יותר?',
    'Can you change the numbers to move them around?': 'את יכולה לשנות את המספרים כדי להזיז אותן?',
    'Can you change the numbers so that one covers the other?': 'את יכולה לשנות את המספרים כך שתיבה אחת תכסה את השניה?',
    'Monster like boxes square.': 'תכנותפלצת אוהבת ריבועים!',
    'A square has the same width and height.  This box has the same width and height, both are 80.': 'לריבוע יש אורך וגובה שווים. לתיבה הזו יש את אותו רוחב וגובה - שניהם 80.',
    'Variables': 'משתנים',
    'Hey, look, this does the same thing!': 'ואו! זה עושה את אותו הדבר!',
    'Why does that do the same thing?  Any ideas?': 'למה זה עושה את אותו הדבר? יש לך רעיון?',
    'var means variable. What we did is create a variable, called it <span class=tutor-code>size</span>, set it equal to 80, and now we can use <span class=tutor-code>size</span> where we would have used 80. Do you know why we might want that?':
        'var זה קיצור של variable - מִשְׁתַּנֶּה.<BR>מה שעשינו זה ליצור משתנה שוקראים לו <span class=tutor-code>size</span>, וקבענו את הערך שלו ל-80 ועכשיו אנחנו יכולים להשתמש ב-<span class=tutor-code>size</span> במקום 80.<BR>למה נראה לך שנרצה דבר כזה?',
    'What happens if you change 80 to 220?': 'מה קורה כשמשנים את 80 ל-220?',
    'And look!  Wider and taller box, both at the same time!': 'תראי! תיבה יותר רחבה ויותר גבוהה - באותו הזמן!',
    'Can you change the other numbers to move the box around?': 'את יכולה לשנות את המספרים האחרים כדי להזיז את התיבה?',
    'Can you make the box very small?': 'את יכולה לעשות את התיבה מאוד קטנה?',
    'What happens if you make <span class=tutor-code>size</span> equal to 0? Or to something really big like 5000?': 'ומה יקרה אם נשנה את <span class=tutor-code>size</span> ל-0? או למשהו ממש גדול כמו 5000?',
    'Monster want two boxes.': 'תכנותפלצת רוצה שתי תיבות',
    'Both boxes have the same size.  That\'s a neat trick.': 'לשתי התיבות יש את אותו הגודל. מגניב, לא?',
    'You can change what <span class=tutor-code>size</span> is equal to.  That will grow or shrink both boxes at once! Try changing 80 to 180!': 'את יכולה לשנות את הערך של <span class=tutor-code>size</span>. זה יגרום לשתי התיבות לגדול או לקטון ביחד. נסי לשנות את 80 ל-180!',
    'Can you move each of the boxes around by changing some of the numbers?': 'את יכולה להזיז את התיבות על-ידי שינוי חלק המספרים?',
    'Monster want more boxes.  Three boxes!': 'תכנותפלצת רוצה עוד תיבות. שלוש תיבות!',
    'Now what happens when you change what <span class=tutor-code>size</span> is equal to?': 'מה יקרה עכשיו אם נשנה את הערך של <span class=tutor-code>size</span>?',
    'More boxes!  Try changing size now!': 'עוד תיבות! נסי לשנות את הגודל עכשיו!',
    'Color': 'צבע',
    'Ooo!  Color!  Pretty!': 'היי ! צבע! יפה!',
    'Many colors work.  Try "green" or "purple" or "gold".': 'אפשר להשתמש בהרבה שמות של צבעים (באנגלית). אפשר "green" (ירוק) או "purple" (סגול) או "gold" (זהב).',
    'How about two pink boxes?': 'ומה לגבי תיבות ורודות?',
    'One pink and one silver.': 'ואולי אחד ורוד ואחד כסף?',
    'Can you make the silver box gold instead?  And the pink one blue instead?': 'את יכולה להחליף את הכסף בזהב (gold) ואת הורוד בכחול (blue)?',
    'Here are two boxes that are the same color again.  Now can you make the two boxes be different colors?': 'הנה שוב שתי תיבות באותו צבע. אפשר לשנות אותם להיות בצבעים שונים?',
    'Here is one version.  I like red and blue.': 'הנה אפשרות אחת. אני אוהבת אדום וכחול.',
    'Red, green, and blue.  That\'s nice.': 'אדום, ירוק כחול. זה נחמד.',
    'Wha... This does the same thing!  What could rgb() be?': 'רגע - זה עושה את אותו הדבר. מה זה יכול להיות ה-()rgb הזה?',
    'Try changing any of the zeroes to 200 or so.  And try changing any of the 255 to 0. What do the numbers seem to do?': 'נסי לשנות את האפסים ל-200 או משהו כזה. נסי לשנות את אחד מה-255 ל-0. מה נראה לך שהמספרים האלה עושים?',
    'Did you figure it out?  rgb() refers to red, green, and blue.  The numbers go from 0 to 255. So, <span class=tutor-code>rgb(0, 255, 0)</span> means no red or blue, but all the green you got!':
        'הצלחת להבין? ()rgb מתייחס לאדום (red), ירוק (green), וכחול (blue). המספרים הם בין 0 ל-255, אז המשמעות של <span class=tutor-code>(rgb(0, 255, 0</span> היא שאין אדום, אין כחול ויש המון ירוק.',
    'You can make lots of colors this way if you change some of the numbers.  Try it!': 'את יכולה ליצור הרבה צבעים ככה אם את משנה את המספרים. נסי ותראי!',
    'Quiz: Color': 'חידון: צבע',
    'Here is a fun game.  Can you make these two boxes the same color?': 'הנה משחק נחמד. את יכולה לגרום לשתי התיבות להיות באותו הצבע?',
    'Can you make these both blue?': 'את יכולה לעשות את שתיהן כחולות?',
    'Can you figure out what the rgb() numbers should be to make these both yellow?': 'את יכולה לחשוב מה המספרים המתאימים כדי ששתי אלו יהיו צהובות (yellow)?',
    'Can you figure out what the rgb() numbers should be to make these both teal?': 'את יכולה לחשוב מה המספרים המתאימים כדי ששתי אלו יהיו בצבע טורקיז (teal)?',
    'Okay, this one is really hard.  Can you make these two exactly match?  Can you figure out what the rgb() numbers should be to make these both crimson? Don\'t worry if you don\'t get it exactly, just see how close you can get!':
        'אוקיי, זה באמת קשה. את יכולה לעשות את שני אלו תואמים בדיוק? את יכולה למצוא איזה מספרי ()rgb יכולים להרכיב את צבע הארגמן הזה? לא נורא אם זה לא מדויק, פשוט תנסי להגיע הכי קרוב שאת יכולה.',
    'Here it is.  Whew, that\'s a hard one!  How close did you get?': 'הנה זה. וואו, זה היה קשה. כמה קרוב הגעת?',
    'If you want to try others, put "olive", "purple", "aqua", or any other color you can think of as the color for the first box, then try to find the rgb numbers that match it!':
        'אם את רוצה להמשיך לנסות, את יכולה לנסות "olive", "purple", "aqua", או כל צבע אחר באנגלית בשביל התיבה הראשונה ואז נסי למצוא את צבעי ה-rgb שמתאימים לו!',
    'Color and Transparency': 'צבע ושקיפות',
    'rgba() is a crazy version of rgb(). See what this does?  It\'s got one more number at the end that\'s 0.5.  What is that last number doing? Try changing the 0.5 to 0.1.  Or to 0.8.  What does it do?':
        '()rgba היא הגרסה המשוגעת של ()rgb. שמת לב מה היא עושה? יש לה עוד מספר בסוף - 0.5. מה המספר הזה עושה? מה קורה אם משנים אותו ל-0.1? או ל-0.8?',
    'The a in rgba means alpha (how transparent the box is) from 0.0 (invisible) to 1.0 (solid)': 'ה-a ב-rgba מתייחס למשהו שנקרא אלפא והוא קובע כמה שקופה התיבה תהיה - מ-0.0 (שקוף לגמרי) עד 1.0 (אטום - לא שקוף בכלל)',
    'You can do pretty cool things with rgba().  Look at this!  Try changing some of the 0.5 alphas to 0.2 or 0.8!': 'את יכולה לעשות דברים ממש קוליים עם ()rgba. תראי את זה! נסי לשנות את האלפא 0.5 ל-0.2 או 0.8!',
    'Try changing the size from 80 to 180!  You can get some fun effects when the colors overlap. Play with it!': 'נסי לשנות את הגודל מ-80 ל-180! אפשר לקבל אפקטים נחמדים כשהצבעים חופפים. שחקי עם זה!',
    'Operators and Assignment': 'אופרטורים והשמה',
    'Let\'s go back to variables. Monster no like to repeat numbers. Can you replace both the 20 numbers with <span class=tutor-code>offset</span>?': 'בואי נחזןר למשתנים. תכנותפלצת לא אוהבת לחזור על מספרים. את יכולה להחליף את שני מספרי ה-20 ב-<span class=tutor-code>offset</span>?',
    'Now try changing what <span class=tutor-code>offset</span> is equal to from 30 to 50.  See how you can move the first box?': 'כעת נסי לשנות את הערך של <span class=tutor-code>offset</span> מ-30 ל-50. את רואה איך את יכולה להזיז את התיבה הראשונה?',
    'Variables can be set to new values.  See how offset is set to 100 before being used by the second box?': 'אפשר לתת למשתנים ערך אחר. את רואה איך offset משתנה ל-100 לפני שמשתמשים בו בתיבה השניה?',
    'Try moving the second box.  Change the 100 to 50 or 150.': 'נסי להזיז את התיבה השניה. שני את ה-100 ל-50 או ל-150.',
    'Try moving the first box too.': 'נסי להזיז גם את התיבה הראשונה.',
    'Can you put the boxes on top of each other so it looks like just one box?': 'את יכולה לשים את התיבות אחת על השניה כך שהן יראו כמו תיבה אחת?',
    'You can also add numbers to a variable. See what this is doing? It changes offset with <span class=tutor-code>offset = offset + 50</span>': 'אפשר גם להוסיף מספרים למשתנה. את רואה איך עושים את זה? משנים את ה-offset על-ידי <span class=tutor-code>offset = offset + 50</span>.',
    '<span class=tutor-code>offset = offset + 50</span> means take offset, add 50 to it, then make offset equal that now.  In other words, make offset 50 more than it used to be.':
        'הכוונה ב-<span class=tutor-code>offset = offset + 50</span> היא לקחת את offset להוסיף לו 50, ואז לשים את התוצאה ב-offset. במילים אחרות - לקחת את offset ולהגדיל אותו ב-50.',
    'Quiz: Variables and Operators': 'חידון: משתנים ואופרטורים',
    'How about you try it?  Can you replace both the 90 numbers used for the (left, top) of the second box with a variable? Hint: Either create a new variable or change offset and then use offset.':
        'בואי ננסה את זה, טוב? את יכולה להחליף את שני מספרי ה-90 שמשתמשים בהם כדי למקם את התיבה השניה למשתנים? רמז: או שתגדירי משתנה חדש, או שתשני את offset ותשתמשי בו.',
    'Monsters like adding.  Me add good.  Okay, now try changing <span class=tutor-code>offset</span> from 30 to 80.  See what happens?': 'מפלצות אוהבות חיבור.',
    'Ooo, you can move both boxes together!  Change the offset and move \'em around!': 'הי! אפשר להזיז את שתי התיבות ביחד! משנים את offset והם זזים בבת אחת!',
    'More Operators': 'עוד אופרטורים',
    'This looks the same, but it\'s a little different.  What\'s that <span class=tutor-code>*</span> doing?  What happens if you change <span class=tutor-code>* 3</span> to <span class=tutor-code>* 2</span>?  Try changing it to <span class=tutor-code>* 1</span>.  Try changing the offset too.  Did you figure out what <span class=tutor-code>*</span> means?':
        'זה נראה אותו דבר , אבל טיפה שונה. מה ה-<span class=tutor-code>*</span> עושה?<BR>מה קורה אם את משנה את <span class=tutor-code>3*</span> ל-<span class=tutor-code>2*</span>? נסי לשנות את זה ל-<span class=tutor-code>1*</span>. נסי לשנות גם אם offset. הבנת למה הכוונה ב-<span class=tutor-code>*</span>?',
    '<span class=tutor-code>*</span> means multiply.  <span class=tutor-code>2 * 2</span> would be 4.  So, <span class=tutor-code>offset = offset * 3</span> means make offset three times bigger.':
        'הסימן כוכבית (<span class=tutor-code>*</span>) אומר כפל. <span class=tutor-code>2 * 2</span> שווה ל-4. אז <span class=tutor-code>offset = offset * 3</span> אומר ש-offset יהיה גדול יותר פי שלושה.',
    '<span class=tutor-code>*</span> means multiply and <span class=tutor-code>/</span> means divide.  So, what we set size equal to below is just a complicated way of saying make size equal to 100.  See?':
        'הסימן "<span class=tutor-code>*</span>" אומר כפל, והסימן "<span class=tutor-code>/</span>" אומר חילוק. אז, מה שאנחנו עושים כאן זה פשוט דרך מתוחכמת לעשות את offset שווה ל-100. הבנת?',
    'If and Comparisons': 'משפטי תנאי והשוואות',
    'We can also compare numbers.  See this code?  We will only draw a second box when <span class=tutor-code>size</span> is less than 80.':
        'אנחנו יכולים גם להשוות מספרים. את רואה את הקוד? אנחנו נצייר את התיבה השניה רק כש-<span class=tutor-code>size</span> יהיה פחות מ-80.',
    'Try changing size to 150.  See what happens? Try changing size to 79.  Then change it to 80.': 'נסי לשנות את size ל-150. את רואה מה קורה? נסי לשנות ל-79, ואז ל-80.',
    'Quiz: Variables and Color': 'חידון: משתנים וצבע',
    'Okay, let\'s see what you know!  Here are two boxes.  Can you add a third box (offset by another 60 from the second box)?': 'אוקיי, בואי נראה מה את יודעת! הנה שתי תיבות. את יכולה להוסיף תיבה שלישית (רחוקה בעוד 60 מהתיבה השניה)?',
    'Here is one way to do it. Try changing the size or offset!': 'הנה דרך אחת לעשות את זה. נסי לשנות את הגודל או את ההיסט (offset).',
    'Remember rgba()?  Monster like.  Can you make me three boxes with different colors?': 'זוכרת את ()rgba? תכנותפלצת אוהבת. את יכולה לעשות שלוש תיבות בצבעים שונים?',
    'Here is one way.  Ooo!  Pretty!  Try changing size, offset, or the red, blue, and green numbers!': 'הנה דרך אחת לעשות את זה. היי! יפה! נסי לשנות גודל, היסט, או את המספרים של אדום, כחול וירוק!',
    'For Loops': 'לולאות for',
    'Monster no like writing code more than once.  Lots of writing the same code more than once here, me not like.': 'תכנותפלצת לא אוהבת לכתוב קוד יותר מפעם אחת. כאן יש הרבה קוד שכתוב אותו דבר יותר מפעם אחת. אני לא אוהבת את זה.',
    'This is called a <span class=tutor-code>for</span> loop.  It repeats code without writing it more than once.  Me like.  Try changing the 3 to 5!': 'זה נקרא לולאת <span class=tutor-code>for</span>. זה חוזר על הקוד בלי לכתוב אותו יותר מפעם אחת. נסי לשנות את ה-3 ל-5!',
    'For loops have three parts, where to start (<span class=tutor-code>i = 0</span>), when to keep going (<span class=tutor-code>i < 5</span>), and how much to change each time (<span class=tutor-code>i = i + 1</span>). Can you make ten boxes?':
        'ללולאות for יש שלושה חלקים: איפה להתחיל (<span class=tutor-code>i = 0</span>), עד מתי להמשיך (<span class=tutor-code>i < 5</span>) וכמה לשנות בכל פעם (<span class=tutor-code>i = i + 1</span>). את יכולה לעשות 10 תיבות?',
    'Argh!  They don\'t fit?  How can you make ten boxes fit?': 'אויש! הן יוצאות מהעמוד? איך את יכולה לגרום לעשר התיבות להתאים לעמוד?',
    'Here is one way!': 'הנה דרך אחת!',
    'Smaller boxes also fit.  Try playing with size, offset, and changing 10!': 'תיבות קטנות יותר גם מתאימות לעמוד.<BR>נסי לשחק עם הגודל וההיסט או לשנות את המספר 10!',
    'Fun with For Loops': 'כיף עם לולאות for',
    'Remember rgba()? What\'s this doing?  Play with it!': 'זוכרת את ()rgba? מה זה עושה? שחקי עם זה!',
    'Complicated!  That means use 0 blue light for the first box, 25 for the second, then 50, 75, 100...': 'מסובך! זה אומר להשתמש ב-0 אור כחול בתיבה הראשונה, 25 בשניה, ואז 50, 75, 100...',
    'Here is another one, this one changing alpha!  Neat-o!': 'הנה עוד אחד, זה משנה את האלפא! מגניייב!',
    'Quiz: Write Code Yourself': 'חידון: כתוב קוד בעצמך',
    'Can you show me what you learned?  Draw me a square! Hint: Remember <span class=tutor-code>c.fillRect(<i>left, top, width, height</i>);</span> to draw a box.': 'את יכולה להראות לי מה למדת? ציירי לי ריבוע! רמז: זכרי ש-<span class=tutor-code>c.fillRect(<i>left, top, width, height</i>);</span> מצייר תיבה.',
    'Can you add another square?': 'את יכולה להוסיף עוד ריבוע?',
    'Now can you make the second square red? (Hint: <span class=tutor-code>c.fillStyle = "blue";</span> before fillRect() will make the rect blue)': 'עכשיו את יכולה לעשות את הריבוע השני אדום?<BR>(רמז: <span class=tutor-code>;"c.fillStyle = "blue</span> לפני ()fillRect יעשה את הריבוע כחול)',
    'Great! Did you get something like this? If not, try playing with the numbers a bit to see how it works!': 'גדול! קיבלת משהו כזה? אם לא, נסי לשחק קצת עם המספרים כדי לראות איך זה עובד!',
    'Lines': 'קווים',
    'Monster draw line. What do you think moveTo() does? lineTo()? Try changing 20 to 50.': 'תכנותפלצת מציירת קו. מה לדעתך עושה ()moveTo? ו-()lineTo? נסי לשנות את 20 ל-50.',
    'Try changing the other numbers too.  Can you figure out what moveTo() and lineTo() do?': 'נסי לשנות גם למספרים אחרים. את כבר יכולה להבין מה ()moveTo ו-()lineTo עושים?',
    'moveTo(left, top) moves the pen to a spot without drawing.  lineTo(left, top) draws a line from wherever the pen is to a spot.':
        '(moveTo(left, top מזיז את העט לנקודה בלי לצייר.<BR>(lineTo(left, top מצייר קו מהמקום שהעט היה בו אל הנקודה.',
    'Here is what happens if we do a second lineTo().  The second line starts from where the first ended.': 'הנה מה שקורה כשעושים עוד ()lineTo. הקו השני מתחיל מאיפה שהקו הראשון נגמר.',
    'So, we\'re drawing a path, a trail of lines all connected together.  We start the path with beginPath() and draw everything with stroke().': 'אז, אנחנו מציירים מסלול, אוסף של קווים שכולם מחוברים יחד. אנחנו מתחילים את המסלול עם ()beginPath ומציירים הכל עם ()stroke.',
    'If we put a moveTo() before the second lineTo(), we\'ll move the pen without drawing.  See?': 'אם נשים את ()moveTo לפני ה-()lineTo השני, זה יזיז את העט בלי לצייר. זה ברור?',
    'You try it!  Add another line, put a second c.lineTo() after the first going to (50, 115).': 'נסי את זה! הוסיפי עוד קו, הוסיפי עוד ()c.lineTo אחרי הראשון שיגיע אל (50, 115).',
    'Did that do what you expected?  Try adding a third line!': 'עשית מה שרציתי? נסי להוסיף קו שלישי!',
    'Can you make a triangle?': 'את יכולה לעשות משולש?',
    'Here is one way, a triangle!': 'הנה דרך אחת. משולש!',
    'Okay, an orange triangle.  Like blue better.  Can you make it blue?': 'אוקיי, משולש כתום. אני אוהבת יותר כחול. את יכולה לעשות אותו כחול?',
    'I was trying to make two triangles, but forgot a moveTo().  See what happened?': 'ניסיתי לעשות שני משולשים, אבל שכחתי לעשות ()moveTo. רואה מה קרה?',
    'That\'s not good.  Can you add <span class=tutor-code>c.moveTo(200, 130);</span> to make it two separate triangles?': 'זה לא טוב. את יכולה להוסיף <span class=tutor-code>;(c.moveTo(200, 130</span> כדי לעשות אותם שני משלושים נפרדים?',
    'Lines and Loops': 'קווים ולולאות',
    'I want a lot of triangles. We need to use <span class=tutor-code>for</span>!  This for loop draws two triangles.': 'אני רוצה הרבה משלושים. אנחנו צריכים להשתמש ב-<span class=tutor-code>for</span>! לולאת ה-for הזו מציירת שני משולשים.',
    'This for loop starts at 30 and increases by 30 every time.  So, until it is told to stop, it counts 30, 60, 90, 120...  Right now, the for loop is told to stop at 60.':
        'לולאת ה-for הזו מתחילה ב-30 ומתקדמת ב-30 כל פעם. אז, עד שאומרים לה לעצור, היא סופרת 30, 60, 90, 120... כרגע, אומרים ללולאה לעצור ב-60.',
    'So, can you make this for loop draw three triangles? Five?': 'אז, את יכולה לגרום ללולאת ה-for הזו לצייר שלושה משולשים? וחמישה?',
    'Can you make more triangles by changing how the for loop goes up?  What if it counted by 10 each time, so it would count 30, 40, 50, 60... Can you do try that?':
        'את יכולה לעשות עוד משולשים על-ידי שינוי הדרך שבה הלולאה עולה? מה יקרה אם היא תספור עד 10 כל פעם, כך שהיא תספור 30, 40, 50, 60... את יכולה לנסות את זה?',
    'Aieee!  Look at this!  Forty green triangles!': 'היי! תראי את זה! ארבעים משלושים ירוקים!',
    'Play with it more!  Can you change the color?  Can you make even more triangles?': 'שחקי עם זה עוד! את יכולה לשנות את הצבע? את יכולה לעשות אפילו עוד משולשים?',
    'Coding It Easy': 'תכנות זה קל',
    'Two boxes, one using strokeRect(), the other using four lines.': 'שתי תיבות, אחת בעזרת ()strokeRect, השניה בעזרת ארבע שורות.',
    'Sure takes a lot more code to draw it with lines. Can you add a third box?': 'צריך הרבה יותר קוד כדי לצייר תיבה בעזרת קווים. את יכולה להוסיף תיבה שלישית?',
    'strokeRect() is easier, isn\'t it?  Here are three boxes all using strokeRect(). Can you add a fourth?': 'השימוש ב-strokeRect קל יותר, לא? הנה שלוש תיבות שצוירו בעזרת ()strokeRect. את יכולה להוסיף תיבה רביעית?',
    'Avoid Repeating Code': 'המנעות מחזרה על הקוד',
    'What if we want even more boxes?  Lots of copying.  Yuck-o.': 'מה נעשה אם אנחנו רוצים עוד תיבות? הרבה העתקות. זה לא ממש כיף...',
    'I know!  Use for loop!  Can you make more boxes for Code Monster?': 'אני יודעת! נשתמש בלואות for! את יכולה לעשות עוד תיבות בשביל תכנותפלצת?',
    'Can you make more than ten boxes?  And still fit all of them on the screen?': 'את יכולה לעשות יותר מעשר תיבות? ושעדיין כולן יכנסו בתוך המסך?',
    'Variables Make It Easy Too': 'גם משתנים הופכים את זה לקלות',
    'Is it easier now to make more boxes? Why is that?': 'עכשיו קל יותר לצייר יותר תיבות? למה?',
    'This works by having <span class=tutor-code>i</span> count up 1, 2, 3... then putting each box\'s (left, top) at <span class=tutor-code>i * offset</span>, so, since offset is 30, the top left of the first box is (30, 30), the second is at (60, 60), then (90, 90) ...':
        'זה עובד בעזרת <span class=tutor-code>i</span> שסופר 1, 2, 3... ואז שמים את המיקום (מלמעלה ומשמאל) של כל תיבה ב-<span class=tutor-code>i * offset</span>, אז, כיוון ש-offset הוא 30, המיקום הראשון יהיה (30, 30), השני (60, 60), ואז (90, 90) ...',
    'Try changing size, num, and offset.  See what happens?  Play with it!': 'נסי לשנות את המשתנים size, num ו-offset. רואה מה קורה? שחקי עם זה!',
    'It\'s often good to have variables that control things (like size, num, and offset) together so they are easy to change.  Like it?': 'זה טוב שיש משתנים ששלוטים על דברים ביחד, כך שקל לשנות אותם. מה דעתך?',
    'Quiz: For Loops': 'חידון: לולאות for',
    'Can you show me some of what you know? Draw a box. <br>Hint: <span class=tutor-code>c.strokeRect(<i>left, top, width, height</i>);</span> draws a box.':
        'את יכולה להראות לי מה את יודעת? ציירי לי תיבה.<BR> רמז: <span class=tutor-code>;(c.strokeRect(<i>left, top, width, height</i></span> מצייר תיבה.',
    'Now draw four boxes. Hint: Making four boxes is easy using for. Remember, for loop look like this: <span class=tutor-code>for (var i = 0; i < 3; i += 1) {</span>':
        'עכשיו ציירי ארבע תיבות.<BR> רמז: קל לצייר ארבע תיבות בעזרת לולאת for.<BR> זכרי, לולאת for נראית כך:  <span class=tutor-code>} (for (var i = 0; i < 3; i += 1</span>',
    'Can you make it so you can change the size of all your boxes all at once? Hint: To make a variable named size set to 50, you use <span class=tutor-code>var size = 50;</span>':
        'את יכולה לעשות את זה כך שאפשר לשנות בקלות את הגודל של כל התיבות שלך?<BR> רמז: כדי לעשות משתנה בשם size שערכו 50, משתמשים ב-<span class=tutor-code>;var size = 50</span>',
    'Wow, you\'re learning to program!  Lots of ways you could do this, but did you get something like this? If not, try changing some stuff, figure out how it works!':
        'וואו, את לומדת לתכנת! יש הרבה דרכים לעשות את זה - האם הגעת למשהו כזה? אם לא, נסי לשנות כל מיני דברים ולהבין איך זה עובד!',
    'Your Own Functions': 'פונציות משלך',
    'Code Monster no like repeating self.  No like.  No like.  For loops avoid repeating.  Me now show you functions too. Functions also avoid repeating.':
        'תכנותפלצת לא אוהבת לחזור על עצמה. לא אוהבת. לא אוהבת. לולאות for מונעות חזרות. עכשיו אני אראה לך פונקציות. גם פונקציות עוזרות למנוע חזרות.',
    'This is a new function, strokeSquare().  It is just like strokeRect(), but draws squares.': 'זאת פונציה חדשה - ()strokeSquare. היא כמו ()strokeRect, אבל מציירת ריבועים.',
    'strokeSquare() uses strokeRect() to draw a rectangle with the same width and height. See how it works?': '()strokeSquare משתמשת ב-()strokeRect כדי לצייר מלבן עם אותו גובה ורוחב. מבינה איך זה עובד?',
    'So, the first square starts at (30, 100) and then has a height and width of 50. See?': 'אז, הריבוע הראשון מתחיל ב-(30, 100) ואז יש לו גובה ורוחב של 50. מבינה?',
    'Can you add a fourth square below the others using strokeSquare()?': 'את יכולה להוסיף ריבוע רביעי מתחת לאחרים בעזרת ()strokeSquare?', // female
    'More Lines': 'עוד קוים',
    'Ooo! A star! Pretty! Change some of the numbers!  Mess it up!': 'וואו! כוכב! יפה! שני כמה מהמספרים! תבלגני את זה!',
    'Wait, stars aren\'t green.  Can you make it yellow or gold?': 'רגע, כוכבים הם לא ירוקים. את יכולה לעשות אותם צהובים (yellow) או זהובים (gold)?',
    'Ooo! A solid gold star! Did you know you can do that? Change some of the numbers!  Mess it up!': 'וואו! כוכוב זהוב! ידעת שאת יכולה לעשות את זה? שני כמה מהמספרים! תבלגני את זה!',
    'Ooo! A solid gold star! Did you know you can do that? Change some of the numbers!  Mess it up!': 'וואו! כוכוב זהוב! ידעת שאת יכולה לעשות את זה? שנה כמה מהמספרים! תבלגן את זה!',
    'Variables make it easy to change and add more stars. Try changing x, y, and size (or anything else)!': 'משתנים עושים את זה קל לשנות ולהוסיף עוד כוכבים. נסי לשנות את x, y ו-size (או כל דבר אחר)!',
    'Here are two stars, but all that repeating myself hurts. No like. What we do?': 'הנה שני כוכבים, אבל כל החזרות האלה מכאיבות. לא אוהבת. מה עושים?',
    'More Functions': 'עוד פונקציות',
    'Functions! It\'s fillStar()! Can you add a third star?': 'פונקציות! זהו ()fillStar! את יכולה להוסיף עוד כוכב?',
    'Four stars in a row!  Can you make it eight?': 'ארבעה כוכבים בשורה! את יכולה להפוך את זה לשמונה?',
    'Nested Loops': 'לולאות מקוננות',
    'Two loops!  Try changing size or the number of stars!': 'שתי לולאות! נסי לשנות את הגודל או את הכמות של הכוכבים!',
    'Did you know you could do two loops like that, one inside the other?': 'ידעת שאת יכולה לעשות שתי לולאות כאלה, אחת בתוך השניה?',
    'Do you know how it works?': 'את יודעת איך זה עובד?',
    '<span class=tutor-code>j</span> will count 0, 1, 2.  The first time <span class=tutor-code>j</span> counts 0, 1, 2, <span class=tutor-code>i</span> will be 0.  The next time j counts 0, 1, 2, i will be 1.':
        '<span class=tutor-code>j</span> סופר 0, 1, 2.<BR> בפעם הראשונה ש-<span class=tutor-code>j</span> סופר 0, 1, 2, <span class=tutor-code>i</span> יהיה 0.<BR> בפעם הבאה שהוא סופר, <span class=tutor-code>i</span> יהיה 1.',
    'So, for the first star, i = 0 and j = 0.  On the second star, i = 0 and j = 1.  Third, i = 0 and j = 2. Then, i = 1 and j = 0, i = 1 and j = 1, i = 1 and j = 2, and so on.':
        'אז, בכוכב הראשון, i הוא 0 ו-j הוא 0.<BR> בכוכב השני, i הוא 0 ו-j הוא 1.<BR> בשלישי, i = 0 ו-j = 2.<BR> ואז, i = 1 ו-j = 0, j = 1 ו-j = 2 וכך הלאה.',
    'Can you figure out what order it draws the stars?  Which star is drawn first?  Which star is the second star drawn?': 'את יכולה להבין באיזה סדר מצוירים הכוכבים? איזה כוכב מצויר ראשון? ואיזה שני?',
    'The first star will be the one at the top left.  The second drawn is the one below it.  Do you see why?': 'הכוכב הראשון הוא זה שבפינה שמאלית למעלה. השני הוא זה שמתחתיו. מבינה למה?',
    'Fun with Stars': 'כיף עם כוכבים',
    'Wow!  Full of stars! Try changing size!': 'וואו! מלא כוכים! נסי לשנות את הגודל!',
    'Wow!  Five stars, randomly placed, changing every time. Can you have it draw fifty stars? A hundred?  How about bigger stars or smaller stars?': 'וואו! חמישה כוכבים, ממוקמים באקראי, בסדר שמשתנה כל פעם. א יכולה לגרום לו לצייר חמישים כוכבים? מאה? ומה עם כוכבים גדולים יותר או קטנים יותר?',
    'Even More Functions': 'עוד יותר פונקציות',
    'Ugh, me tired of seeing stars.  Lines where it\'s at.  Here two separate lines. See how much is repeated? No like. What can we do?': 'אוף, התייעפתי מכוכבים. בואי נחזור לקווים. הנה שני קווים. רואה כמה חזרות יש כאן. מה אפשר לעשות?',
    'Need drawLine() function.  Here it is.  Now draw one line from (20, 20) to (200, 20) and another from (20, 50) to (200, 50).':
        'אנחנו צריכים פונקציית ()drawLine. הנה היא. עכשיו ציירי קו מ-(20, 20) אל (20, 200) ועוד אחד מ-(50, 20) אל (50, 200).',
    'Did you get it? Here is one version.  Can you add a third line below the other two?': 'הבנת? הנה גרסה אחת. את יכולה להוסיף קו שלישי מתחת שני הראשונים?',
    'Fun with Lines': 'כיף עם קוים',
    'Three vertical lines using for loop.  Can you make it ten lines?': 'שלושה קווים מאונכים בעזרת לולאת for. את יכולה להפוך את זה לעשרה קווים?',
    'Ten lines coming to a point.  Try moving the point!': 'עשרה קווים שמגיעים לנקודה. נסי להזיז את הנקודה!',
    'Ready for something harder?  Now the lines fan to the right.  Can you also add in the ones we saw last, going to the left?': 'מוכנה למשהו קשה יותר? עכשיו הקוים מתפזרים ימינה. את יכולה להוסיף את אלו שראינו קודם, שמתפזרים שמאלה?',
    'Did you get it?  This is one way to do it.  Try moving the point now!': 'הצלחת? הנה דרך אחת לעשות את זה. נסי להזיז את הנקודה עכשיו!',
    'Ooo!  Me like!  Try changing num, px, or py!': 'יש! אוהבת! נסי לשנות את num, px או py!',
    'Can you make lines from all sides?  You will need four drawLine() and your two new ones will use 0 instead of w and h.  Can you do it?': 'את יכולה להוסיף קווים מכל הצדדים? תצטרכי ארבעה ()drawLine ושני החדשים ישתמשו ב-0 במקום ב-w ו-h',
    'I like mine blue.  Play with it!': 'אני אוהבת את שלי כחול. שחקי עם זה!',
    'More Fun with Lines': 'עוד כיף עם קווים',
    'When me little monster, me draw these.  You like too?  Change number of lines!': 'כשהייתי מפלצת קטנה, ציירתי כאלה. גם את אוהבת? שני את מספר הקווים!',
    'Can you add another curve at top right? You will need another drawLine() but use x, 0, w, y.': 'את יכולה להוסיף עוד עקומה בפינה הימנית למעלה? תצטרכי עוד ()drawLine אבל להשתמש ב-x, 0, w, y.',
    'Pretty!  Try other colors and changing the number of lines!': 'יפה! נסי צבעים אחרים ולשנות את מספר הקווים!',
    'Can you make it so the two curves are two different colors?': 'את יכולה לגרום לשני הקווים להיות בצבעים שונים?',
    'Here is one version.  Try changing the colors!': 'הנה גרסה אחת. נסי לשחק עם הצבעים!',
    'Here is a crazy fun random colors changing version.  It\'s complicated, but take a look.  Can you guess how it works? And try changing num!':
        'הנה גרסה משוגעת שמשנה באקראיות את הצבעים. היא מסובכת אבל תנסי להסתכל עליה. את יכולה לנסות לנחש איך היא עובדת? נסי לשנות את num!',
    'Quiz: Functions': 'חידון: פונקציות',
    'You know programming?  Show me!  Can make a function called fillSquare() and then use that to draw a second bigger square? Hint: You\'ll need something like <span class=tutor-code>function fillSquare(left, top, size) {</span>':
        'יודעת לתכנת? תראי לי! את יכולה לעשות פונקציה בשם ()fillSquare ואז להשתמש בה כדי לצייר עוד ריבוע יותר גדול? <BR>רמז: תצטרכי משהו כמו <span class=tutor-code>} (function fillSquare(left, top, size</span>',
    'Did you get it?  Something like this? Now can you make the first square also use fillSquare() instead of calling fillRect()?':
        'הצלחת? משהו כזה? עכשיו את יכולה לעשות שגם הציור של הריבוע הראשון ישתמש ב-()fillSquare במקום לקרוא ל-()fillRect?',
    'Look, one line. Huh. Want more. It would be easier to add more lines if we had that drawLine() function again.  Can you write that and then make this line use it? Hint: Create a function with <span class=tutor-code>function doStuff(a, b, c, d) {</span>':
        'תראי, קו אחד.<BR>יהיה יותר קל להוסיף קווים אם יהיה לנו את הפונקציה ()drawLine.<BR> את יכולה לכתוב אותה ואז לעשות שהציור של הקו הזה יתבצע בעזרתה?<BR>רמז: תייצרי פונקציה עם <span class=tutor-code>} (function doStuff(a, b, c, d</span>',
    'Ahh, isn\'t that better?  Add another line below this one.  Wasn\'t that easy now?': 'יותר טוב, לא?<BR> תוסיפי עוד קו מתחת לזה. יותר קל עכשיו, נכון?',
    'So easy to add more lines, I want lots more.  Give me ten lines total, one on top of the other, separated by 10! Hint: Easier with for loop. For loop looks like <span class=tutor-code>for (var i = 0; i < 3; i += 1) {</span>':
        'כל-כך קל להוסיף עוד קווים, אני רוצה הרבה יותר. ציירי לי עשרה קווים, אחד מעל השני, מופרדים ברווח של 10!<BR>רמז: קל יותר לעשות זאת עם לולאת for.<BR> לולאות for נראות ככה:<BR><span class=tutor-code>} (for (var i = 0; i < 3; i += 1</span>',
    'You get something like this?  You getting good!  Try playing with the numbers! I like n of 40 and dy of 5!': 'קיבלת משהו כזה? את משתפרת! נסי לשחק עם המספרים!<BR> אני אוהבת את n בגודל 40 ואת dy בגודל 5!',
    'Erasing': 'מחיקה',
    'Me miss boxes.  Hey, look, boxes, can erase!  Try moving the white box from (50, 50) to (20, 20)!': 'אני מתגעגעת לתיבות.<BR>הי, תראי, תיבות, אפשר למחוק!<BR>נסי להזיז את התיבה הלבנה מ-(50, 50) ל-(20,20)',
    'Order matters.  Last one to draw gets to stay!  Try moving the white box now!': 'הסדר משנה. האחרון שמצייר נשאר! נסי להזיז את התיבה הלבנה עכשיו!',
    'Another way to erase is with clearRect().  Can you make a little blue smiley face using these?  It is almost done.  You just need to move them.': 'דרך נוספת למחוק היא עם ()clearRect. את יכולה לעשות סמיילי קטן וכחול עם אלו?<BR>זה כמעט גמור. את צריכה רק להזיז אותם.',
    'Me like this guy.  Ooo, friend.': 'אני אוהבת את הבחור הזה. הוא יכול להיות חבר שלי.',
    'A big clearRect() erases everything.  Uncomment the big clearRect() (remove the <span class=tutor-code>//</span>) and see what happens.':
        '()clearRect גדול מוחק את הכל.<BR>נסי להוציא מהערה את ה-()clearRect הגדול (תמחקי את ה-<span class=tutor-code>//</span>) ותראי מה קורה.',
    'Comments': 'הערות',
    '<span class=tutor-code>//</span> at the beginning of a line makes the line get ignored.  That\'s called commenting out.  Try adding <span class=tutor-code>//</span> before some of the other lines and see what happens!':
        '<span class=tutor-code>//</span> בתחילת השורה גורם לשורה להיות הערה ולא להתבצע. זה נקרא "להכניס להערה". <BR>נסי להוסיף <span class=tutor-code>//</span> בתחילת שורות אחרות ולראות מה קורה!',
    'Rotation and Translation': 'סיבוב ותרגום',
    'A box.  But how did it get that far away from the edge?  Try changing x and y.': 'תיבה. אבל איך היא הגיעה כל כך רחוק מהקצה? נסי לשנות את ה-x וה-y.',
    'The fillRect() says to make the (left, top) at (0, 0), so wouldn\'t you think the box would be at the upper left corner? But, wait, what is translate()?':
        'ה-()fillRect אומר לצייר את פינת (שמאל, למעלה) ב-(0, 0), אז לא היית חושבת שהתיבה תצוייר בפינה השמאלית למעלה?<BR>אבל, רגע, מה זה ()translate?',
    'translate() changes where (0, 0) is. After translate(50, 50), for example, anything that tries to draw at (0, 0) will draw at (50, 50).  Drawing at (20, 20) would draw at (70, 70), since 50 + 20 = 70.  See?':
        '()translate משנה את המיקום של (0, 0).<BR> למשל, אחרי (translate(50, 50, כל מה שתנסי לצייר ב-(0, 0) יצוייר ב-(50, 50).<BR> ציור ב-(20, 20) יצוייר ב-(70, 70) כי 50 + 20 = 70.<BR>מבינה?',
    'Why does this do what it does?  What will happen if you uncomment save() and restore()? Try it. Was it what you expected?':
        'למה זה עושה את מה שזה עושה?<BR>מה יקרה אם תוציאי מהערה את ()save ואת ()restore?<BR>נסי את זה. זה מה שציפית לקבל?',
    'The second box becomes black and gets drawn right on top of the first box!  Why?': 'התיבה השניה נהיית שחורה ומצויירת בדיוק מעל הראשונה!<BR>למה?',
    'restore() eliminates all the changes since the last save().  So, if you save, then change the fillStyle color or do translate(), then restore, everything goes back to what it was right before the save.':
        '()restore מבטלת את כל השינויים שנעשו מאז הקריאה האחרונה ל-()save.<BR> אז אם את שומרת (save), ואז משנה את ה-fillStyle או קוראת ל-()translate, ואז משחזרת (restore), הכל חוזר להיות כמו שהיה לפני השמירה',
    'We can rotate stuff too.  Try changing angle!': 'אנחנו יכולים גם לסובב דברים.<BR>נסי לשנות את angle.',
    'You might be used to degrees?  Angles in Javascript are in radians.  45 degrees is about 0.8 in radians.  Try changing angle from 0.1 to 0.8!':
        'יכול להיות שאת רגילה למעלות?<BR>זוויות ב-JavaScript מצויינות ברדיאנים.<BR>45 מעלות הן בערך 0.8 רדיאנים.<BR> נסי לשנות את angle מ-0.1 ל-0.8!<BR>',
    'Spinning all the way around is 360 degrees, right?  In radians, it is about 6.28.': 'סיבוב שלם זה 360 מעלות, נכון? ברדיאנים, זה בערך 6.28.',
    'Did you notice that this box is pivoting through its top left corner when you rotate it?  That\'s the same spot we said to go with translate(), right?':
        'שמת לב שהתיבה הזו מסתובבת על הפינה השמאלית העליונה כשמסובבים אותה?<BR>זאת אותה הנקודה שזזה כשעושים ()translate, נכון?',
    'Try changing angle now.  How is this different?': 'נסי לשנות את angle עכשיו. מה נשתנה?',
    'Kind of weird that the strokeRect() uses -50 for the left and top, isn\'t it?  But the top left of the box is still at (50, 50), because we translated to (100, 100), and 100 - 50 = 50.':
        'קצת מוזר ש-()strokeRect משתמשת ב-50 בשביל הלמעלה והשמאל, לא?<BR>אבל הפינה השמאלית העליונה של התיבה היא עדיין ב-(50, 50), בגלל שתרגמנו ל-(100, 100), ו-100 - 50 = 50.',
    'When we rotate, we rotate around (100, 100) because of the translate().  Oh, and (100, 100) is the center of the box!  So, this box is rotating around its center!':
        'כשאנחנו מסובבים, אנחנו מסובבים סביב (100, 100) בגלל ה-()translate. אה, ו-(100, 100) זה מרכז התיבה!<BR>אז התיבה הזו מסתובבת סביב המרכז שלה!',
    'translate() and rotate() add to any earlier translate() and rotate(), unless you restore() the old state.  Try changing angle or uncommenting save() and restore()!':
        'הפונקציות ()translate ו-()rotate מוסיפות לקריאות קודמות ל-()translate ו-()rotate, אלא אם כן קוראים ל-()restore ומחזירים את המצב הקודם.<BR>נסי לשנות את angle או להוציא מהערה את ה-()save וה-()restore.',
    'Did that do what you expected?  You see why it did what it did?  With the save() and restore(), the second box is black and gets drawn right on top of the first purple box.':
        'זה עשה מה שציפית?<BR>את מבינה למה זה עשה מה שזה עשה?<BR>עם ()save ו-()restore, התיבה השניה היא שחורה ומצויירת בדיוק מעל התיבה הראשונה הסגולה.',
    'Can you move the black box off the purple box?  So you can see both?': 'את יכולה להזיז את התיבה השחורה מהסגולה, כדי שתוכלי לראות את שניהם?',
    'Here is one way. See how the translate() is to a different spot?  Try changing angle now!  Did you try a negative number of angle like -0.2?':
        'הנה דרך אחת.<BR>את רואה איך ה-()translate הוא לנקודה אחרת?<BR>נסי לשנות את angle עכשיו!<BR>ניסית לתת ל-angle מספר שלילי, כמו 0.2-?',
    'Boxes rotated relative to their center are usually what you want.  Look, a function that makes boxes rotated to different angles!  Can you add a few more boxes?':
        'בדרך כלל תרצי תיבות שמסתובבות יחסית לנקודת המרכז שלהן.<BR>תראי, הנה פונקציה שגורמת לתיבות להסתובב לזוויות אחרות!<BR>את יכולה להוסיף עוד כמה תיבות?',
    'Quiz: Rotation and Translation': 'חידון: סיבוב ותרגום',
    'You coder now? Show me! Draw a box rotated by -0.5.  Hint: Use c.rotate(); and c.strokeRect();':
        'את מתכנתת עכשיו? תראי לי!<BR>ציירי תיבה שמסתובבת בזוית 0.5-.<BR>רמז: תשתמשי ב-<span class=tutor-code>;()c.rotate</span> וב-<span class=tutor-code>;()c.strokeRect</span>',
    'Oh, that too easy? You want harder problems? Draw five boxes on top of each other, each rotated by 0.3 more than the last.<br>Hint: c.translate() might be useful<br>Hint: For loops look like <span class=tutor-code>for (var i = 0; i < 5; i += 1) {</span>':
        'אה, זה היה קל מדי? רוצה בעיות קשות יותר? ציירי חמש תיבות אחת מעל השנייה, כל אחת מסובבת ב-0.3 יותר מהקודמת.<BR>רמז: <span class=tutor-code>;()c.rotate</span> יכול להיות שימושי.<BR>רמז: לולאות For נראות ככה: <span class=tutor-code>} (for (var i = 0; i < 5; i += 1</span>',
    'Did you get something like this? See how this works?  It first moves a spot with translate(), then repeatedly draws squares around that spot and rotates around that spot.':
        'קיבלת משהו כזה? את מבינה איך זה עובד?<BR> בהתחלה זה מזיז את הנקודה עם <span class=tutor-code>()translate</span>, ואז מצייר ריבועים מסביב לנקודה הזו ומסתובב מסביב לנקודה הזו.',
    'Play with it a bit!  Try changing num and angle!': 'שחקי עם זה קצת! נסי לשנות את num ואת angle!',
    'A Hard Problem': 'בעיה קשה',
    'Let\'s say we want to try to draw a tree.  How might you do that?': 'נניח שאנחנו רוצים לציר עץ. איך היית עושה את זה?',
    'Trees have branches.  Here is a start. Can you add more branches?': 'לעצים יש ענפים. הנה התחלה. את יכולה להוסיף עוד ענפים?',
    'Oog, that a lot of work.': 'אויש, זה הרבה עבודה.',
    'Me try using variables.  Does that make it easier?  Not sure it does. What do you think?': 'אני הייתי מנסה להשתמש במשתנים.<BR>זה הופך את זה לקל יותר? לא בטוח. מה את חושבת?',
    'Bleah, that still too much work. For loop maybe?  How might that work? I don\'t know.  How would we draw two branches from every branch? I\'m not sure.  What do you think?':
        'אוף, זה עדיין יותר מדי עבודה.<BR>אולי לולאות for? איך זה יעבוד? אין לי מושג. איך נצייר שני ענפים מכל ענף? לא בטוח.<BR>מה את חושבת?',
    'No, I can\'t see a way to draw trees easily using a for loop.  What else we got?  Can we use functions?':
        'לא, אני לא רואה דרך לצייר עצים בקלות עם לולאת for.<BR> מה עוד יש לנו? אנחנו יכולים להשתמש בפונקציות?',
    'Maybe a function could draw a branch.  But how could every branch draw two more branches?':
        'אולי פונקציה יכולה לצייר ענף. אבל איך כל ענף יצייר שני ענפים נוספים?',
    'Let\'s start with a function that draws a branch.  Here\'s one.  It takes four numbers, where to start (x,y), the length <span class=tutor-code>l</span>, and the <span class=tutor-code>direction</span> which says whether to draw left, right, or straight.':
        'בואי נתחיל עם פונקציה שמציירת ענף. הנה אחת.<BR>היא מקבלת ארבעה מספרים: איפה להתחיל (<span class=tutor-code>x,y</span>), האורך (<span class=tutor-code>l</span>) והכיוון (<span class=tutor-code>direction</span>) - ימינה, שמאלה או ישר.',
    '<span class=tutor-code>direction</span> works by slanting the branch left (for negative numbers) or right (for positive).  See?  Try changing it!':
        'הכיוון עובד על-ידי הטיית הענף שמאלה (עם מספרים שליליים) או ימינה (עם מספרים חיוביים).<BR>את מבינה? נסי לשנות את זה!',
    'How can we make this draw two more branches now?': 'אז איך אנחנו יכולים לעשות שזה יצייר שני ענפים נוספים?',
    'Recursion': 'רקורסיה',
    'Ah, me know, make function use itself! Can you see what this is doing?': 'אה, יש לי רעיון, נעשה פונקציה שמשתמשת בעצמה!<BR>את מבינה מה זה עושה?',
    'That crazy! Here\'s a version that\'s easier to twiddle.  Try playing with it!  Change <span class=tutor-code>xScale</span>, <span class=tutor-code>yScale</span>, or <span class=tutor-code>minLength</span>!  Cool, huh?':
        'זה מטורף! הנה גרסה שיותר קל להבין.<BR>נסי לשחק עם זה! שני את <span class=tutor-code>xScale</span>, <span class=tutor-code>yScale</span> או <span class=tutor-code>minLength</span>!<BR>מגניב, לא?',
    'There are a couple new things here.  Monster stop to explain.': 'יש כאן כמה דברים חדשים.<BR>תכנותפלצת תעצור ותסביר.',
    'drawBranch() is a <i>recursive</i> function.  That means it calls itself.':
        '<span class=tutor-code>()drawBranch</span> היא פונקציה <i>רקורסיבית</i>. זה אומר שהיא קוראת לעצמה.',
    'drawBranch() only calls itself if <span class=tutor-code>l > minLength</span>.  <span class=tutor-code>l</span> gets smaller and smaller every time drawBranch() calls itself, so drawBranch() stops calling itself eventually when the length of a branch gets small enough.':
        '<span class=tutor-code>()drawBranch</span> קוראת לעצמה רק אם <span class=tutor-code>l > minLength</span>.<BR>  <span class=tutor-code>l</span> נהיה קטן יותר יותר בכל פעם -<span class=tutor-code>()drawBranch</span> קוראת לעצמה, אז <span class=tutor-code>()drawBranch</span> מפסיקה בסוף לקרוא לעצמה כשהאורך של הענפים נהיה קטן מספיק.',
    'Recursive functions are neat, but tricky! Let\'s do a bit more. Change this to call <span class=tutor-code>nSquareRecursive(4);</span> instead of <span class=tutor-code>nSquare(4);</span>':
        'פונקציות רקורסיביות הן פשוטות, אבל ערמומיות!<BR>בואי נעשה עוד משהו.<BR>שני את הקריאה <span class=tutor-code>;(nSquare(4</span> להיות <span class=tutor-code>;(nSquareRecursive(4</span>.',
    'Other than not being blue, it\'s the same, right?  Do you see how they both work?': 'חוץ מזה שעכשיו זה לא כחול, זה אותו הדבר, נכון?<BR> את מבינה איך שתי הפונקציות עובדות?',
    'nSquare() uses a for loop, starts at 4, and counts down: 4, 3, 2, 1.':
        '<span class=tutor-code>()drawBranch</span> משתמשת בלולאת for - היא מתחילה ב-4 ואז סופרת לאחור: 4, 3, 2, 1.',
    'nSquareRecursive() calls itself with one less each time.  So, when called with 4, it calls itself with 3, and that call calls itself with 2, and that call calls itself with 1.  At one, it says, stop calling yourself, so it stops.  And, on each call, it draws a box located at (n * 30, n * 30).  See?':
        '<span class=tutor-code>()nSquareRecursive</span> קוראת לעצמה עם אחד פחות בכל פעם.<BR>אז כשאנחנו קוראים לה עם 4, היא קוראת לעצמה עם 3, וזה קורא לעצמה עם 2 וזה קורא לעצמה עם 1.<BR> ב-1, היא אומרת "תפסיקי לקרוא לעצמך" ומפסיקה.<BR>ובכל קריאה, היא מציירת תיבה במיקום (n * 30, n * 30).<BR>הבנת?',
    'This little piece of code draws a shrinking pile of boxes. See how it works?':
        'קטע הקוד הקצר הזה מצייר אוסף מתכווץ של תיבות.<BR>את מבינה איך הוא עובד?',
    'The way it works is it does a translate() to the bottom right corner of the box, then draws the box back up behind it. So the box will be <span class=tutor-code>size</span> big starting at (-size, -size).  Then, as long as the boxes haven\'t gotten too small, it does that again by calling itself, but shrinking the size of the box the next time.':
        'זה עושה <span class=tutor-code>()translate</span> לפינה התחתונה הימנית של התיבה, ואז מצייר אחריה תיבה בגודל <span class=tutor-code>size</span> במיקום <span class=tutor-code>(size, -size-)</span>.<BR>וכך, כל עוד התיבות לא קטנות מדי, הוא עושה את זה שוב על ידי קריאה לעצמו עם גודל קטן יותר בכל פעם.',
    'Here is the same thing using a for loop instead. Compare the two. See how they both work?': 'הנה אותו הדבר עם לולאת for. נסי להשוות בין השתיים.<BR>את מבינה איך שתיהן עובדות?',
    'The for loop starts by drawing a box of size 100, then one of 65, and so on.  So does the recursive version, but the recursive version does it by calling itself.':
        'לולאת ה-for מתחילה בציור של תיבה בגודל 100, ואז אחת בגודל 65, וכן הלאה.<BR>כך גם הפונקציה הרוקורסיבית עושה, אבל הגרסה הרוקרסיבית עושה עת זה על ידי קריאה לעצמה.',
    'You can change them if you want!  Go experiment!': 'את יכולה לשנות אותם אם את רוצה! תשחקי עם זה!',
    'Rotation, Translation, and Recursion': 'סיבוב, תרגום ורקורסיה',
    'Back to trees.  Ooo!  An even better tree!': 'נחזור לעצים. הי! עץ אפילו טוב יותר!',
    'See how this works? It uses translate() to move to the end of a branch, then rotate() to tilt the branches off to one side or the other.': 'את מבינה איך זה עובד? זה משתמש ב-()translate כדי לזוז לסוף הענף ואז ב-()rotate כדי לסובב את הענף לצד אחד או לשני.',
    'Try changing <span class=tutor-code>angle</span>, <span class=tutor-code>branchScale</span>, <span class=tutor-code>l</span>, and <span class=tutor-code>minL</span>!  If you experiment a bit, you can get some really cool drawings.  Play with it!':
        'נסי לשנות את <span class=tutor-code>angle</span>, <span class=tutor-code>branchScale</span>, <span class=tutor-code>l</span>, ו-<span class=tutor-code>minL</span>!<BR>אם תנסי, תוכלי לקבל ציורים מאוד יפים.<BR>שחקי עם זה!',
    'I think it would look even more like a tree if <span class=tutor-code>angle</span> was a little more random.  Can you make angle bigger and then make rotate() use a number between 0 and angle? (Hint: <span class=tutor-code>Math.random()</span> makes a number from 0.0 to 1.0)':
        'נדמה לי שזה יראה אפילו יותר דומה לעץ אם הזוית (<span class=tutor-code>angle</span>) תהיה יותר אקראית.<BR>את יכולה להשתמש בזוית יותר גדולה ולעשות ש-<span class=tutor-code>angle</span> ישתמש במספר בין 0 לזוית הזו?<BR>רמז: <span class=tutor-code>()Math.random</span> נותן כל פעם מספר אחר בין 0 ל-1.',
    'Here is one version.  Can you make the <span class=tutor-code>branchScale</span> more random too?':
        'הנה אפשרות אחת.<BR>את יכולה לעשות גם את <span class=tutor-code>branchScale</span> יותר אקראי?',
    'Ooo!  That\'s very tree-like!': 'אווו! זה מאוד דומה לעץ!',
    'Try changing <span class=tutor-code>angle</span>, <span class=tutor-code>branchScale</span>, <span class=tutor-code>l</span>, and <span class=tutor-code>minL</span>!  If you experiment a bit, you can get some pretty wild stuff!':
        'נסי לשנות את <span class=tutor-code>angle</span>, <span class=tutor-code>branchScale</span>, <span class=tutor-code>l</span>, ו-<span class=tutor-code>minL</span>!<BR>אם תשחקי עם זה קצת, תוכלי לקבל כמה דברים די פראיים!',
    'Drawing Your Own Tree': 'לצייר את העץ שלך',
    'I bet you can draw your own trees now!  Want to try?  I\'ll help you!': 'נראה לי שאת יכולה כבר לצייר עצים משלך עכשיו!<BR>רוצה לנסות? אני אעזור לך!',
    'Let\'s draw different trees than we did before.  Let\'s make this plant alternate between splitting off branches right and left.  Some plants do that.  Ready to start?  I\'ll guide you through it!':
        'בואי נצייר עצים שונים ממה שעשינו עד עכשיו.<BR>בואי נעשה צמח שמחליף את הוצאת הענפים שלו משמאל לימין.<BR>יש צמחים שעושים את זה.<BR>מוכנה להתחיל? אני אעזור לך!',
    'So, first we need a branch.  Let\'s make a function drawBranch() that takes two values, a length called <span class=tutor-code>l</span> and a <span class=tutor-code>direction</span>.':
        'ראשית, אנחנו צריכים ענף.<BR>בואי נעשה פונקציה <span class=tutor-code>()drawBranch</span> שמקבלת שני ערכים: אורך (<span class=tutor-code>l</span>) וכיוון (<span class=tutor-code>direction</span>).',
    'Do you remember how to write a function like that?  You don\'t need to make it do anything yet, just declare a function called drawBranch().':
        'את זוכרת איך לכתוב פונקציה כזאת?<BR>את עדיין לא צריכה שהיא תעשה שום דבר, רק תגדירי פונקציה שנקראת <span class=tutor-code>()drawBranch</span>.',
    'Were you thinking something like this?': 'חשבת על משהו כזה?',
    'I\'ve added some comments about what to do next.  We need to start drawing our tree.  Can you write the code beneath each of the comments?':
        'הוספתי כמה הערות בקוד על מה שצריך לעשות.<BR>אנחנו צריכים להתחיל לצייר את העץ שלנו.<BR>את יכולה לכתוב את הקוד מתחת כל הערה?',
    'Okay, so you translate() so you start at the right spot and then you try to draw a branch.  Now we need to make drawBranch() do something!  Can you do what the comments say to do?  You should get a single branch (which will look like the trunk of the tree) when you are done.':
        'אוקיי, אז קראת ל-<span class=tutor-code>()translate</span> כדי להתחיל מהנקודה הנכונה ואת מנסה לצייר ענף.<BR>עכשיו אנחנו צריכים ש-<span class=tutor-code>()drawBranch</span> יעשה משהו!<BR>את יכולה לעשות מה שההערות אומרות?<BR>בסוף, את אמורה לקבל ענף אחד (שיראה כמו הגזע של העץ).',
    'You should have something like this now.  Let\'s keep going!  Look for the comments to tell you what to do next!': 'צריך להיות לך משהו כזה עכשיו.<BR> בואי נמשיך! תסתכלי בהערות כדי להבין מה לעשות בשלב הבא!',
    'Great!  Now you have drawn your first branch, moved to the end of that branch, and you\'re ready to draw more branches!':
        'מעולה!<BR>סיימת לצייר את הענף הראשון שלך, זזת לקצה הענף, ואת מוכנה לצייר עוד ענפים!',
    'Let\'s stop for a second and think about what we\'re going to want to do next.': 'בואי נעצור שניה ונחשוב על הדבר הבא שאנחנו רוצים לעשות.',
    'This plant is going to split off two branches, one going up, one going off to the side.  We want the ones going off to the side to alternate, first right, then left, then right, then left.':
        'הצמח הזה עומד להתפצל לשני ענפים - אחד עולה למעלה, ואחד הולך הצידה.<BR>אנחנו רוצים שאלו שהולכים הצידה יהיו לסירוגין - בהתחלה ימינה, ואז שמאלה, ואז ימינה, ואז שמאלה.',
    'We\'ll keep splitting and drawing and splitting and drawing until the branches get very short.':
        'נמשיך להתפצל ולצייר ולהתפצל ולצייר עד שהענפים יהיו קצרים מאוד.',
    'Let\'s add that next.  We should only draw more branches if the length <span class=tutor-code>l</span> is more than 5.  Can you add that?':
        'בואי נוסיף את זה עכשיו.<BR>אנחנו צריכים לצייר עוד ענפים רק אם האורך (<span class=tutor-code>l</span>) גדול מ-5.<BR>את יכולה להוסיף את זה?',
    'You should have this now.': 'כרגע צריך להיות לך את הקוד הזה:',
    'Let\'s add just the branch going straight up.  Let\'s make it a little shorter that the last branch we drew.  Follow the instructions in the comments.':
        'בואי נוסיף רק את הענפים שעולים למעלה.<BR>בואי נעשה אותו קצת יותר קצר מהענף האחרון שציירנו.<BR>עקבי אחרי ההוראות בהערות שבקוד.',
    'Do you have this now?  See what it does?  It repeatedly draws a branch straight up, making the branch a little shorter each time.  It looks like a line, but it\'s really a bunch of branches piled on top of each other.':
        'קיבלת את זה?<BR>את מבינה מה זה עושה?<BR>ציירנו כמה ענפים שעולים למעלה, בכל פעם ענף קצת יותר קצר.<BR>זה נראה כמו קו, אבל בעצם זה אוסף של ענפים, אחד מעל השני.',
    'Pretty boring so far?': 'די משעמם עד עכשיו?',
    'It\'s about to get a lot more exciting!': 'זה הולך להיות הרבה יותר מלהיב!',
    'Let\'s add the second branch!  For that branch, we are going to rotate to the side indicated by direction, then draw a shorter branch.  Follow the instructions in the comments.':
        'בואי נוסיף את הענף השני!<BR>בשביל הענף הזה, נסתובב לצד המתאים, ונצייר ענף יותר קצר.<BR>עקבי אחרי ההוראות שבקוד.',
    'Aieeee!  What did you do?': 'אויש! מה עשית?',
    'Just kidding!  It\'s all fine!': 'סתאאם! הכל בסדר!',
    'This is just part of what is called debugging, getting the bugs (the problems) out.':
        'זה פשוט חלק ממה שנקרא לדבג - להוציא את הבאגים (הבעיות) החוצה.',
    'So, that didn\'t do what you expected it to do, did it?': 'אז, זה לא עשה מה שציפית שזה יעשה, נכון?',
    'Any idea what\'s wrong?': 'יש לך מושג מה לא בסדר?',
    'What\'s happening is that all those translate() and rotate() calls are piled on top of each other.  We didn\'t really want that.  When it\'s time to draw the second branch, we really want everything to be the way it was when we did the first branch, but it\'s not, we\'ve translated and rotated all over the place.':
        'מה שקורה זה שכל הקריאות ל-<span class=tutor-code>()translate</span> ול-<span class=tutor-code>()rotate</span> הצטברו אחת מעל השניה.<BR>אנחנו לא באמת רוצים את זה.<BR>כשאנחנו מתחילים לצייר את הענף השני, אנחנו בעצם רוצים שהכל יחזור להיות כמו שהיה כשציירנו את הענף הראשון - אבל זה לא, כי כבר הזזנו וסובבנו הכל.',
    'Save and restore to the rescue!  Can you add <span class=tutor-code>c.save();</span> and <span class=tutor-code>c.restore();</span> where the comments say to add them?':
        'מה שאנחנו צריכים זה שמירה ושחזור!<BR>את יכולה להוסיף <span class=tutor-code>;()c.save</span> ו-<span class=tutor-code>;()c.restore</span> במקום ההערות המתאימות?',
    'That\'s mostly better.  But it\'s only drawing one side of the tree!  Why is that?':
        'זה יותר טוב.<BR>אבל זה מצייר רק צד אחד של העץ!<BR>למה?',
    'Figure it out?': 'הצלחת להבין למה?',
    'It\'s because we didn\'t switch direction.  Direction is always the same as what it was at the start, it is always 1.  It should alternate, 1, -1, 1, -1 ...':
        'זה בגלל שלא החלפנו כיוון.<BR>הכיוון (direction) נשאר כל הזמן אותו דבר - הוא כל הזמן 1.<BR>הוא צריך להתחלף כל פעם: 1, 1-, 1, 1-, ...',
    'Can you make it so both of the drawBranch() calls inside of drawBranch() use -direction instead of direction?':
        'את יכולה לעשות ששתי הקריאות ל-<span class=tutor-code>()drawBranch</span> ישתמשו ב-<span class=tutor-code>direction-</span> במקום ב-<span class=tutor-code>direction</span>?',
    'Do you now have this?  Wow, nice work!': 'קיבלת את זה?<BR>וואו, עבודה יפה!',
    'Play with Your Tree': 'לשחק עם העץ שלך',
    'Try playing with it more! Try changing the 0.8, 0.7, and 0.5 to see what happens!':
        'נסי להמשיך לשחק עם זה!<BR>נסי לשנות את המספרים 0.8, 0.7 ו-0.5 ותראי מה יוצא!',
    'Look! Green leaves on the ends of the branches!':
        'תראי! עלים ירוקים בקצות הענפים!',
    'See how that works? The little size 4 green squares are the leaves! They are only added when we get to the end of the branch.':
        'את מבינה איך זה עובד?<BR>הריבועים הירוקים הקטנים בגודל 4 הם העלים!<BR>הם נוספים רק כשאנחנו מגיעים לקצה הענף.',
    'Can you make the branches brown?': 'את יכולה לצבוע את הענפים בצבע חום (brown)?',
    'Fun with Ferns': 'כיף עם שרכים',
    'Let me show you something really cool that is only a minor change from what you just did!': 'תני לי להראות לך משהו ממש מגניב שמקבלים כשמשנים משהו קטן במה שעשית!',
    'This fern is drawn just by doing three branches from each branch, each rotated at -80, 10, and 100 degrees.  See how it works?':
        'השרך מתקבל כשיוצרים שלושה ענפים מכל ענף, מסובבים בזוויות 80-, 10 ו-100.<BR>את מבינה איך זה עובד?',
    'Every time it draws a branch, it draws three more branches from the end of that branch.  It keeps doing that and doing that, smaller and smaller, and you get what looks like a fern!':
        'בכל פעם שהוא מצייר ענף, הוא מצייר שלושה ענפים נוספים מקצה הענף הזה.<BR>הוא ממשיך לעשות זאת שוב ושוב, קטן יותר ויותר, ומקבלים משהו שנראה כמו שרך!',
    'Fractals': 'פרקטלים',
    'All this stuff with trees and ferns are a type of pattern called a <i>fractal</i>. Fractals are crazy cool fun with math.':
        'כל הצורות שאלה של עצים ושרכים זה סוגים של תבנית שנקראת <i>פרקטל</i>.<BR>פרקטלים זה שימוש משוגע ומגניב במתמטיקה.',
    'This fractal is called the Terdragon.': 'הפרקטל הזה נקרא עקומת דרקון (terdragon).',
    'If you make l bigger, you can zoom in and see it\'s made of little triangles!': 'אם תגדילי את זה, תוכלי להכנס פנימה ולראות שזה מורכב ממשולשים קטנים!',
    'Can you figure out how it works? Take a look at the code.': 'את יכולה להבין איך זה עובד?<BR>תסתכלי על הקוד.',
    'Try making <span class=tutor-code>l=10</span> and then <span class=tutor-code>n=1</span> and then <span class=tutor-code>n=2</span> then <span class=tutor-code>n=3</span>, and you\'ll see how it grows.':
        'תנסי לשנות ל-<span class=tutor-code>l=10</span> ואז ל-<span class=tutor-code>n=1</span> ואז ל-<span class=tutor-code>n=2</span> ואז ל-<span class=tutor-code>n=3</span> ותראי איך זה גדל.',
    'Quiz: Challenge Problem': 'חידון: בעיית אתגר',
    'Okay, it\'s time for the last quiz.  This one is hard, so don\'t worry if you can\'t finish it.  There is a lot of good stuff coming after this.  Whatever you do, don\'t quit here, make sure to keep going so you can see all the fun stuff!':
        'טוב, הגיע הזמן לחידון האחרון.<BR>הוא קשה, אז אל תכנסי ללחץ אם את לא מצליחה לגמור אותו.<BR>יש המון דברים טובים אחריו, אז גם אם את לא גומרת אותו, אל תעצרי כאן ותמשיכי הלאה כדי לראות אותם.',
    'For the quiz, I want you to write something entirely yourself.  Make a checkerboard pattern, a black square, then a white, then a black, and so on, at least four rows of them (like a 6 x 4 grid).  Can you do it?':
        'בשביל החידון, אני רוצה שתכתבי משהו לגמרי בעצמך.<BR>ציירי תבנית של לוח שחמט: ריבוע שחור, ואז לבן, ואז שחור, וכך הלאה - לפחות 4 שורות כאלה, עם 6 ריבועים בכל שורה.<BR>את יכולה לעשות את זה?',
    'If you did it, good job, this is really hard, I\'m impressed!  If you didn\'t get it, no worries, here\'s a hint, you might need two for loops, one inside the other, you\'ll use at least one c.fillRect(), and don\'t forget a for loop looks like <span class=tutor-code>for (var i = 0; i < 3; i += 1) {</span>':
        'אם עשית את זה - עבודה טובה. זה ממש קשה ואני ממש מתרשמת!<BR>אם לא הצלחת, לא נורא, הנה רמז: את כנראה צריכה שתי לולאות for, אחת בתוך השנייה, ואת תצטרכי לפחות קריאה אחת ל-<span class=tutor-code>()c.fillRect</span> ואל תשכחי שלולאת for נראית ככה: <span class=tutor-code>} (for (var i = 0; i < 3; i += 1</span>',
    'Ready to see different ways to solve it?': 'מוכנה לראות דרכים אחרות לפתור את זה?',
    'Many Ways to Code': 'דרכים רבות לכתוב קוד',
    'Here is one way.  See how this works?': 'הנה דרך אחת. את מבינה איך זה עובד?',
    'If not, try commenting out one of the fillSquare() lines (using <span class=tutor-code>//</span>) so you can see what the other is drawing.':
        'אם לא, נסי להכניס להערה אחת מהשורות <span class=tutor-code>()fillSquare</span> (בעזרת <span class=tutor-code>//</span>), כדי שתביני מה השורה השנייה מציירת.',
    'It draws the first and third rows, starting at (0, 0), then doing (0, 100), then doing (100, 0), then (100, 100), and so on.  Then it draws the second and fourth rows, starting at (50, 50), then (50, 150), and so on.  Make sense?':
        'זה מצייר את השורות הראשונה והשלישית, מתחיל במיקום (0, 0), ואז עובר ל-(100, 0) ואז ל-(0, 100) ואז ל-(100, 100) וכן הלאה.<BR>ואז זה מצייר את השורות השנייה והרביעית, מתחיל במיקום (50, 50) ואז (150, 50) וכן הלאה.<BR>נשמע הגיוני?',
    'Let\'s look at a few more ways of doing a checkerboard.  Here is another version. See how this works?':
        'בואי נראה עוד כמה דרכים לצייר לוח שחמט. הנה עוד גרסה.<BR>את מבינה איך זה עובד?',
    'Every time through the loop, it draws two squares, below and to the right of the other.':
        'בכל כניסה ללולאה, הוא מצייר שני ריבועים - אחד מתחת ומימין לשני.',
    'Then, it does that three times across and twice down, skipping over the white squares.  Cool, huh?':
        'ואז, הוא עושה את זה שלוש פעמים הצידה ופעמיים למטה, ומדלג על הריבועים הלבנים.<BR>מגניב, לא?',
    'Modulo': 'מודולו',
    'Here is yet another way of doing a checkerboard.  Any idea how this works?  What\'s that <span class=tutor-code>i % 2</span> doing?':
        'הנה עוד דרך לצייר לוח שחמט.<BR>יש לך מושג איך זה עובד?<BR>מה הביטוי <span class=tutor-code>i % 2</span> עושה?',
    '<span class=tutor-code>%</span> mean modulo, it gives the remainder after dividing.':
        'הסימן <span class=tutor-code>%</span> נקרא מודולו. הוא מחזיר את השארית אחרי חלוקה.',
    'So, <span class=tutor-code>1 % 2</span> is 1, <span class=tutor-code>2 % 2</span> is 0 (because 2 divides 2 evenly with no remainder), <span class=tutor-code>3 % 2</span> is 1 again, <span class=tutor-code>4 % 2</span> is 0.':
        'אז <span class=tutor-code>2 % 1</span> זה 1, <span class=tutor-code>2 % 2</span> זה 0 (כי 2 מתחלק ב-2 בלי שארית), <span class=tutor-code>2 % 3</span> זה שוב 1, ו-<span class=tutor-code>2 % 4</span> זה 0.',
    'So, how does that complicated expression -- <span class=tutor-code>(i % 2 + j % 2) % 2</span> -- work? When i is even, <span class=tutor-code>i % 2</span> will be 0.  Same for j.  If both are odd, then you get (1 + 1) % 2, which is 0. So, that expression will be 0 if both i and j are even or both i and j are odd.':
        'אז איך הביטוי המסובך הזה -- <span class=tutor-code>2 % (i % 2 + j % 2)</span> -- עובד?<BR>כש-i זוגי, <span class=tutor-code>i % 2</span> יהיה 0. וגם j.<BR>אם שניהם אי-זוגיים, נקבל <span class=tutor-code>2 % (1 + 1)</span> שהוא גם 0.<BR>כלומר, הביטוי הזה יהיה 0 אם גם i וגם j זוגיים או אם גם i וגם j אי-זוגיים.',
    'For if statements, 0 means false and anything else is true.  So, we\'ll do what\'s inside the if statement only when only one of i or j is odd.':
        'בפקודות if, המספר 0 אומר לא, וכל מספר אחר אומר כן.<BR>אז אנחנו נבצע את מה שבתוך ה-if רק אם או i או j אי-זוגי (אבל לא שניהם).',
    'So, what this does is visit all the squares in the 6 x 4 grid, but only draw a black square in the ones where either the column number or row number is odd but not both.  Make sense now?':
        'אז, מה שזה עושה זה לעבור על כל הריבועים בטבלה, אבל לצייר ריבוע שחור רק באלה שהשורה שלהם או העמודה שלהם אי-זוגית, אבל לא שניהם.<BR>עכשיו זה נשמע הגיוני?',
    'See how many ways there are to solve a problem like this?  There is usually not just one solution to something you want to do, lots of strategies might work.  Isn\'t that neat?':
        'אז כמה דרכים יש כדי לפתור בעיה כזאת?<BR>בדרך כלל אין רק פתרון אחד לבעיה שאת מנסה לפתור - הרבה דרכים יכולות לעבוד.<BR>זה מגניב, לא?',
    'Animation': 'אנימציה',
    'Okay, time for some fun! Let\'s do animation!': 'אוקיי, הגיע הזמן לעשות קצת כיף!<BR>בואי נעשה אנימציה!',
    'Moving stuff is fun but a little weird.  You need to make something happen every 1/20th of a second or so. What is this doing?':
        'להזיז דברים זה כיף, אבל קצת מוזר.<BR>את צריכה לגרום למשהו לקרות כל 1/20 של שנייה.<BR>מה זה עושה?',
    'The way this works is that, every time we are told to do drawStep(), we erase the screen, move the box, draw the box, and, unless we hit the edge, we say to do drawStep() again a little while later.':
        'הדרך שבה זה עובד היא שבכל פעם שקוראים ל-<span class=tutor-code>()drawStep</span> אנחנו מוחקים את המסך, מזיזים את המיקום של התיבה, מציירים את התיבה, ואם לא הגענו לקצה, אנחנו אומרים שצריך לקרוא ל-<span class=tutor-code>()drawStep</span> בעוד קצת זמן - 50 אלפיות שנייה.',
    'Try changing <span class=tutor-code>vx</span>, <span class=tutor-code>vy</span>, and <span class=tutor-code>step</span>. You can change the speed of the box and make it move different directions!':
        'נסי לשנות את <span class=tutor-code>vy</span>, <span class=tutor-code>vx</span> ו-<span class=tutor-code>step</span>.<BR>את יכולה לשנות את המהירות של התיבה ולגרום לה לזוז לכיוונים שונים!',
    'Try commenting out the clearRect().  That\'s kind of cool, isn\'t it?':
        'נסי להכניס להערה את השורה <span class=tutor-code>()clearRect</span>. זה די מגניב, לא?',
    'Rotating Movement': 'תנועה סיבובית',
    'Spinning a box is fun.  Can you make it go faster?': 'לסובב תיבה זה כיף.<BR>את יכולה לגרום לה להסתובב מהר יותר?',
    'This works the same way as the moving box.  Every time it is told to do drawStep(), it clears the screen, rotates, draws the box, and then says to do drawStep() again in a little while later.':
        'זה עובד באותה דרך כמו התיבה שזזה.<BR>בכל פעם שקוראים ל-<span class=tutor-code>()drawStep</span>, זה מנקה את המסך, מסובב, מצייר את התיבה, ואומר שצריך לקרוא ל-<span class=tutor-code>()drawStep</span> שוב בעוד קצת זמן.',
    'What happens if you comment out the clearRect()?': 'מה קורה אם את מכניסה להערה את השורה <span class=tutor-code>()clearRect</span>?',
    'Try adding more boxes. Did it do what you expected?': 'נסי להוסיף עוד תיבות.<BR>זה עשה מה שחשבת?',
    'I like this version.  It\'s like a solar system!  Try changing the speed now!': 'אני אוהבת את הגרסה הזו. היא כמו מערכת השמש!<BR>נסי לשנות את המהירות עכשיו!',
    'Objects': 'אובייקטים',
    'Stop for a sec.  Sit back and think about how you might create three moving boxes.': 'עצרי רגע.<BR>שבי וחשבי על איך את יכולה ליצור שלוש תיבות נעות.',
    'Well, you\'d need the x and y position of each, right?  And the size of each.  And maybe the dx and dy velocity of each?  And the angle?':
        'אז קודם כל, את תצטרכי את המיקום של כל אחת (x ו-y), נכון?<BR>והגודל של כל אחת (size).<BR>ואולי את המהירות של כל אחת (dx ו-dy)?<BR>והזווית (angle)?',
    'You could create variables x1, x2, x3, y1, y2, y3, dx1 ... ugh.  That\'s getting painful, isn\'t it?': 'תוכלי ליצור משתנים x1, x2, x3, y1, y2, y3, dx1 ... אוף! זה קצת מייגע, לא?',
    'There\'s another way to do this, we can make objects!  Objects are little bundles of variables and code. Here\'s a box object.  Take a look at it.  See how it works?':
        'יש דרך אחרת לעשות את זה - אנחנו יכולים להשתמש באובייקטים!<BR>אובייקטים הם חבילות קטנות של משתנים וקוד.<BR>הנה אובייקט תיבה. תסתכלי עליו. איך זה עובד?',
    'What is going on is <span class=tutor-code>new Box(10, 10, 100)</span> creates an object, then immediately calls the Box() function to set it up.  Box() then uses <span class=tutor-code>this.x</span> to set a variable named x in the object to the x that was passed into the function.':
        'מה שקורה זה ש-<span class=tutor-code>(new Box(10, 10, 100</span> יוצר אובייקט ואז מיד קורא לפונקציה ()Box כדי לאתחל אותו.<BR>()Box משתמש  ב-<span class=tutor-code>this.x</span> כדי להגדיר משתנה בשם x באובייקט עם הערך של הפרמטר x שהועבר לפונקציה.',
    'It does the same thing to set up all the other variables in our new Box object.  Once the object is created and set up, we set our variable <span class=tutor-code>b</span> to that.  Later, we can get at the x and y and other variables of our box using <span class=tutor-code>b.x</span>, <span class=tutor-code>b.y</span>, and so forth.':
        'הוא עושה את אותו הדבר כדי לאתחל את שאר המשתנים באובייקט Box החדש שיצרנו.<BR>אחרי שהאובייקט נוצר ומאותחל, אנחנו מאתחלים את המשתנה <span class=tutor-code>b</span> להחזיק את האובייקט הזה.<BR>אחר-כך, אנחנו שולפים את x ו-y ושאר המשתנים מתוך אובייקט התיבה שלנו בעזרת <span class=tutor-code>b.x</span>, <span class=tutor-code>b.y</span>, וכן הלאה.',
    'Our box object is just a little bundle of variables that describe our box.  It says where the box is, its velocity (dx and dy), how big it is, everything that it means to be a box.':
        'אובייקט התיבה שלנו הוא רק חבילה של משתנים שמתארים את התיבה שלנו.<BR>הוא אומר איפה התיבה, מה המהירות שלה (dx ו-dy) ומה הגודל שלה - כל מה שזה אומר להיות תיבה.',
    'We can even have box objects know how to draw themselves.': 'אנחנו אפילו יכולים לעשות שאובייקטי תיבה ידעו איך לצייר את עצמם.',
    'See how <span class=tutor-code>this.stroke</span> is set equal to a function?  And that function calls strokeRect() to draw this box?  Then, later, we create a box called b1 and tell it to draw itself with <span class=tutor-code>b1.stroke()</span>. That\'s pretty cool, isn\'t it?':
        'את רואה איך <span class=tutor-code>this.stroke</span> מאותחל לפונקציה?<BR>והפונקציה הזו קוראת ל-()strokeRect כדי לצייר את התיבה?<BR>ואז, אחר כך, אנחנו יוצרים תיבה שנקראת b1 ואומרים לה לצייר את עצמה בעזרת <span class=tutor-code>()b1.stroke</span>.<BR>זה די מגניב, לא?',
    'Canvas Object': 'אובייקס הקנבס',
    'You know, monster has a secret.  Monster been hiding something from you.': 'את יודעת, לתכנותפלצת יש סוד. תכנותפלצת החביאה משהו ממך.',
    'Have you been wondering why we use c.strokeRect() to draw a box?  What\'s the deal with that <span class=tutor-code>c.</span>?  Why is that there?':
        'אולי תהית למה אנחנו משתמשים ב-()c.strokeRect לצייר תיבה?<BR>מה הקטע עם ה-<span class=tutor-code>.c</span> הזה? למה הוא שם?',
    'Turns out all this time you have been using an object to draw, an object called the canvas object.':
        'מתברר שכל הזמן הזה השתמשת באובייקט כדי לצייר - אובייקט שנקרא אובייקט הקנבס.',
    'Monster added some code for you to get that object from the web page and put it in a variable named <span class=tutor-code>c</span>, so you could use it.  Let me show you what that hidden code looks like.':
        'תכנותפלצת הוסיפה קוד בשבילך - קוד שמקבל את האובייקט הזה מהדפדפן ושם אותו במשתנה בשם <span class=tutor-code>c</span>, כדי שתוכלי להשתמש בו. <BR>תני לי להראות לך איך נראה הקוד המוסתר הזה.',
    'That code asks the document object (which is the web page) to give us the element in the web page called \'pane\' (which is the id in the web page of the canvas where we draw), and then gets the 2d drawing canvas from that element.  We name that canvas object <span class=tutor-code>c</span> and use all its drawing functions, which is why we use <span class=tutor-code>c.</span> in front of every use of strokeRect().':
        'הקוד הזה מבקש מאובייקט המסמך (document) שמייצג את דף האינטרנט לתת לנו אלמנט בתוך דף האינטרנט שנקרא "pane" (שזה השם של האיזור בדף שבו אנחנו מציירים), ואז מבקש את קנבס הציור הדו-ממדי (2d) מהאלמנט הזה.<BR>אנחנו קוראים לאובייקט הקנבס <span class=tutor-code>c</span> ומשתמשים בכל פונקציות הציור שלו, ולכן אנחנו משתמשים ב-<span class=tutor-code>.c</span> לפני כל שימוש ב-()strokeRect.',
    'Using Objects': 'שימוש באובייקטים',
    'That\'s useful to know if you write your own Javascript for your own drawing in web pages later!  But, for now, let me hide it again, so we can focus on Box objects.':
        'זה מידע שיהיה שימושי כשתתחילי לכתוב דפי אנטרנט בעצמך ותרצי להוסיף להם קוד Javascript כדי לצייר בהם!<BR>אבל לעכשיו, תרשי לי להחביא אותו שוב, כדי שנוכל לשוב ולהתרכז באובייקט Box.',
    'Can you create a couple more boxes and have them draw themselves? For each one, you\'ll have to use new and stroke(), like we did for the box we called b1.':
        'את יכולה ליצור עוד כמה תיבות שיציירו את עצמן?<BR>לכל אחת, תצטרכי להשתמש ב-new וב-()stroke, כמו שעשינו בתיבה b1.',
    'That\'s pretty nice, but calling each box b1, b2, b3, or whatever is painful. What if I want ten boxes?  Or a hundred?':
        'זה נחמד מאוד, אבל לקרוא לכל תיבה b1, b2, b3 וכן הלאה זה מייגע.<BR>ומה אם נרצה עשר תיבות? או מאה?',
    'Lists (Arrays)': '(רשימות (מערכים',
    'What I need is a list of boxes, like this!': 'מה שאני צריכה זה רשימת תיבות, כמו זו!',
    'A big new thing here.  Monster explain.': 'פה יש משהו חדש שהוא די חשוב. אני כבר מסבירה.',
    '<span class=tutor-code>[]</span> creates what is called an <i>array</i>, which basically is a list that holds stuff.  These lists can hold objects, numbers, whatever we want.':
        '<span class=tutor-code>[]</span> מייצר דבר שנקרא <i>מערך</i> שהוא בעצם רשימה של דברים.<BR>הרשימות האלה יכולות להחזיק אבייקטים, מספרים, או כל דבר אחר שנרצה.',
    'So, <span class=tutor-code>var boxes = []</span> means create an empty list and call it boxes.': 'אז <span class=tutor-code>[] = var boxes </span> אומר: תייצר רשימה ריקה ותקרא לה boxes.',
    '<span class=tutor-code>boxes.push()</span> adds something to the end of the list.  Here, we use it to add a new box.  Because it is in a for loop that counts 0, 1, 2 and then stops, we will add three boxes to the end of the list.':
        '<span class=tutor-code>()boxes.push</span> מוסיף משהו לסוף הרשימה.<BR>כאן אנחנו משתמשים בזה כדי להוסיף תיבה חדשה.<BR>בגלל שזה בתוך לולאת for שסופרת 0, 1, 2 ואז עוצרת, אנחנו נוסיף שלוש תיבות לסוף הרשימה.',
    'Take a look at the second for loop.  <span class=tutor-code>boxes.length</span> is the length of the list.  <span class=tutor-code>boxes[0]</span> is the first box in the list, <span class=tutor-code>boxes[1]</span> the second, and so forth.  So, that second for loop goes through every box in the list and tells it to draw itself by calling <span class=tutor-code>boxes[i].stroke();</span>':
        'תסתכלי על לולאת ה-for השניה.<BR><span class=tutor-code>boxes.length</span> זה האורך שך הרשימה.<BR><span class=tutor-code>[boxes[0</span> זו התיבה הראשונה ברשימה, <span class=tutor-code>[boxes[1</span> זו השניה, וכן הלאה.<BR>אז לולאת ה-for השניה עוברת על כל תיבה ברשימה ואומרת לה לצייר את עצמה בעזרת קריאה ל-<span class=tutor-code>;()boxes[i].stroke</span>',
    'Can you add some more boxes?': 'את יכולה להוסיף עוד כמה תיבות?',
    'Methods on Objects': 'מתודות באובייקטים',
    'So far, we haven\'t really done that much that requires Box objects.  But let\'s go a step further.  Let\'s make boxes that are animated and move!':
        'עד עכשיו, עוד לא עשינו משהו שממש היה צריך בשבילו אובייקטי Box.<BR>אבל בואי נלך עוד צעד.<BR>בואי נעשה תיבות נעות!',
    'Let\'s start by making all our boxes draw to whatever angle they are supposed to be at.  See how this new version of stroke() works?':
        'בואי נתחיל בלעשות שכל תיבה תצייר את עצמה בזווית שלה.<BR>את רואה איך הגרסה החדשה של ()stroke עובדת?',
    'Whenever a box is told to draw itself, we do that by moving to the center of the box, rotating around that center to match the angle of the box, and then draw the box around its center.  Kind of like what we did before for rotated boxes, right?':
        'כשאומרים לתיבה לצייר את עצמה, אנחנו זזים למרכז התיבה, מסתובבים סביב המרכז כדי להתאים לזווית של התיבה, ואז מציירים את התיבה סביב המרכז שלה.<BR>זה כמו מה שעשינו כשציירנו תיבות מסובבות, נכון?',
    'Now let\'s make the boxes spin!  Look at the new function updateAll().  See what it is doing?': 'עכשיו בואי נעשה שהתיבות יסתובבו!<BR>תסתכלי על הפונקציה החדשה - ()updateAll.<BR>את רואה מה היא עושה?',
    'updateAll() starts by clearing the screen, then rotates each box a little more before drawing it.  Finally, it says, call me again in 1/20th of a second.  So, 20 times a second, we rotate each box a little and redraw it.  Cool, huh?':
        '()updateAll מתחילה בלנקות את המסך, ואז לסובב כל תיבה קצת ולצייר אותה.<BR>ובסוף היא אומרת: תקרא לי שוב בעוד עשרימית (1/20) שניה.<BR>אז 20 פעם בשניה, אנחנו מסובבים כל תיבה קצת ומציירים אותה מחדש.<BR>מגניב, לא?',
    'Can you make the boxes spin faster?': 'את יכולה לגרום לתיבות להסתובב מהר יותר?',
    'Can you make them spin the other direction (counter-clockwise instead of clockwise)?': 'את יכולה לגרום להם להסתובב לכיוון השני (נגד כיוון השעון)?',
    'Can you add more boxes?  You\'ll have to change three things to fit them all on the canvas, but I bet you can figure it out.  I liked it with 60 of them, looks really weird!':
        'את יכולה להוסיף עוד תיבות?<BR>תצטרכי לשנות בשלושה מקומות כדי שכולם יכנסו לתוך הקנבס, אבל אני בטוח שתצליחי למצוא איך לעשות את זה.<BR>אני אוהבת 60 תיבות - זה נראה ממש מוזר!',
    'All those fast spinning boxes make Monster dizzy.  Let\'s slow it down again and let me show you something else.  We can move the update into each Box object.  That will be handy when we make the update do more.  See what this does now?':
        'כל התיבות המסתובבות האלה עושות לתכנותפלצת סחרחורת.<BR>בואי נאט אותם ותני לי להראות לך משהו אחר.<BR>אנחנו יכולים להעביר את העדכון לתוך האובייקט Box.<BR>זה יהיה שימושי כשנצטרך שהעדכון יעשה עוד דברים.<BR>את רואה מה זה עושה עכשיו?',
    'updateAll() just calls the update() of the box.  update() on the box changes the angle and then draws the box.  Each box knows how to update and draw itself now.':
        '()updateAll פשוט קורא לפונקציית ()update של כל תיבה.<BR>()update בכל תיבה משנה את הזוית ואז מצייר את התיבה.<BR>עכשיו כל תיבה יודעת איך לעדכן ולצייר את עצמה.',
    'Velocity and Collisions': 'מהירות והתנגשויות',
    'Let\'s make the boxes move too!  All we have to do is have update use <span class=tutor-code>dx</span> and <span class=tutor-code>dy</span>.  Take a look at <span class=tutor-code>Box</span> and how it is updated now!':
        'בואי נעשה שתיבות גם יזוזו!<BR>כל מה שאנחנו צריכים לעשות זה ש-update ישתמש ב-<span class=tutor-code>dx</span> וב-<span class=tutor-code>dy</span>.<BR>תסתכלי על <span class=tutor-code>Box</span> ועל איך שהוא מתעדכן עכשיו!',
    'It\'s a little more complicated, but only a little.  Every time a box is told to update(), it moves by its velocity (<span class=tutor-code>dx</span> and <span class=tutor-code>dy</span>) and rotates by its angular velocity (<span class=tutor-code>da</span>).':
        'זה קצת יותר מסובך, אבל רק קצת.<BR>בכל פעם שתיבה מתעדכנת, היא זזה בהתאם למהירות שלה (<span class=tutor-code>dx</span> ו-<span class=tutor-code>dy</span>) ומסתובבת בהתאם למהירות הזוויתית שלה (<span class=tutor-code>da</span>)',
    'If a box gets off the edge of the screen, we reverse its velocities, making it appear to bounce!  Cool!': 'אם תיבה יוצאת מחוץ למסך, אנחנו הופכים את המהירויות שלה, ואז זה נראה כאילו היא קופצת!<BR>מגניב!',
    'Bitwise Operators (And and Or)': '(And ו-Or) אופרטרי בדיקה',
    'One thing that is new here.  When the box checks if it is off the screen, there\'s something you haven\'t seen before, <span class=tutor-code>||</span>':
        'יש פה משהו אחד חדש.<BR>כשהתיבה בודקת אם היא יצאה מהמסך, יש שם משהו שעוד לא ראית - <span class=tutor-code>||</span>',
    '<span class=tutor-code>||</span> means <i>or</i>, as in either-or, so the first if statement checks if the box has either gone off the left or right edge, and the second checks if it has gone off the top or bottom.  Make sense?':
        '<span class=tutor-code>||</span> אומר <i>"או"</i>, אז ה-if הראשון בודק אם התיבה יצאה מהקצה השמאלי או הימני של המסך, והשני בודק אם היא יצאה מהקצה העליון או התחתון של המסך.<BR>ברור?',
    'There is also a way to say <i>and</i>, as in both have to be true, which is <span class=tutor-code>&&</span>.  So, <span class=tutor-code>||</span> means <i>or</i> and <span class=tutor-code>&&</span> means <i>and</i>.':
        'יש גם דרך לומר <i>"וגם"</i>, כלומר ששני התנאים צריכים להתקיים. את זה עושים בעזרת <span class=tutor-code>&&</span>.<BR>אז <span class=tutor-code>||</span> זה <i>"או"</i> ו-<span class=tutor-code>&&</span> זה <i>"וגם"</i>.',
    'Easy with Objects': 'בקלות עם אובייקטים',
    'Back to the fun.  Have you tried putting in a lot of boxes yet?  Try it!  Make it so there are 10 boxes!  Or 50!':
        'בוא נחזור לכיף.<BR>ניסית כבר לשים המון תיבות? תנסי!<BR>תעשי שיהיו 10 תיבות! או 50!',
    'See how easy it is to keep track of all these boxes, their position, angle, velocity, and everything else, using objects?  Once you say what a Box object is, it\'s easy to create lots and lots of them!':
        'את רואה כמה זה קל לעקוב אחרי כל התיבות האלו, והמיקום שלהם, והזווית, והמהירות וכל השאר, בעזרת אובייקטים?<BR>ברגע שהגדרת מה זה אובייקט Box, זה קל לייצר עוד ועוד אובייקטים כאלה!',
    'Circles, Arcs, and Balls': 'עיגולים, קשתות וכדורים',
    'You\'re nearing the end of the lessons now.  But I still have a couple fun things to show you.':
        'את מתקרבת לסוף השיעורים.<BR>אבל עדיין יש לי עוד כמה דברים כיפיים להראות לך.',
    'Now that you know about objects with velocity, we actually are really close to being able to do cool things like make a ball bounce.  All we need is a little physics, some acceleration to go with our velocities!':
        'עכשיו שאת כבר יודעת על אובייקטים עם מהירות, אנחנו כבר ממש קרובים לעשיית דברים מגניבים כמו כדור קופץ.<BR>כל מה שאנחנו צריכים זה קצת פיזיקה - חישובי תאוצה שתופעל על המהירויות שלנו!',
    'Here\'s a <span class=tutor-code>Ball</span> object.  It\'s a lot like the Box object you saw before, but has differences.  Take a look at the code.':
        'הנה אובייקט <span class=tutor-code>Ball</span>.<BR>זה מאוד דומה לאובייקט Box שראית קודם אבל יש הבדלים.<BR>תסתכלי על הקוד.',
    'One big difference is that a ball is round, so angle doesn\'t matter.  Look at the code.  There is no angle any more, right?':
        'הבדל אחד גדול זה שהכדור הוא עגול, אז הזווית לא משנה.<BR>תסתכלי על הקוד - אין כבר זווית (angle) יותר, נכון?',
    'Another big difference is that we use arc() to draw circles.  Arcs are cool, but they\'re a little complicated for just drawing a circle. Let me explain how they work.':
        'הבדל גדול נוסף זה שאנחנו משתמשים ב-()arc כדי לצייר עיגולים.<BR>קשתות (Arcs) הם מגניבות, אבל קצת מורכבות בשביל לצייר עיגול פשוט.<BR>תני לי להסביר איך הם עובדות.',
    'To draw a circle in Javascript, you call <span class=tutor-code>c.arc(x, y, r, 0, Math.PI * 2);</span>, where (x, y) is the center of the circle, r is the radius, and then 0 and <span class=tutor-code>Math.PI * 2</span> says to draw an arc from 0 degrees to 360 degrees (since 2 * pi in radians is 360 degrees).':
        'כדי לצייר עיגול ב-Javascript, את קוראת ל-<span class=tutor-code>;(c.arc(x, y, r, 0, Math.PI * 2</span>, כאשר (x, y) זה מרכז העיגול, r זה הרדיוס, ו-0 ו-<span class=tutor-code>Math.PI*2</span> אומרים לצייר קשת מ-0 מעלות עד 360 מעלות (כי 2*pi זה 360 מעלות).',
    'Because we draw circles from the center, a bunch of other things change, such as exactly how we check of whether we need to bounce off the sides.':
        'בגלל שאנחנו מציירים עיגולים מהמרכז, עוד כמה דברים משתנים, למשל הבדיקה אם הגענו לקצה המסך וצריך לקפוץ.',
    'Take a look at the code again.  Does it make more sense now?': 'תסתכלי על הקוד שוב. האם עכשיו זה נראה יותר הגיוני?',
    'Acceleration, Velocity, and Physics': 'תאוצה, מהירות ופיזיקה',
    'Okay, now we want to make a bouncing ball.  To do physics, we need velocity and acceleration.  So far, we have had velocity, but no acceleration.  Let\'s add acceleration!  Here it is!':
        'אוקיי, עכשיו אנחנו רוצים לעשות כדור קופץ. כדי לחשב את הפיזיקה של זה, אנחנו צריכים מהירות ותאוצה.<BR>עד עכשיו הייתה לנו מהירות. בואי נוסיף תאוצה!<BR>הנה זה!',
    'Do you see it?  Now, every time we update() on a Ball (and the ball isn\'t bouncing, to simplify things), we change the downward velocity (<span class=tutor-code>dy</span>) by whatever gravity is.':
        'את רואה את זה? עכשיו, בכל פעם שקוראים ל-()update על אובייקט Ball (והכדור לא קופץ, לצורך הפשטות), אנחנו משנים את מהירות הירידה (<span class=tutor-code>dy</span>) של הכדור בהתאם לגודל כח המשיכה (gravity).',
    'Pretty cool!  Try adding 10-15 balls and watch it for a while.  It\'s a full physics simulation with gravity and bouncing!  Very fun!':
        'מגניב ביותר!<BR>נסי להוסיף עוד 10-15 כדורים ולצפות בהם.<BR>זה סימולציה של פיזיקה עם כח משיכה וקפיצה!<BR>כיף מאוד!',
    'Collisions and Physics': 'התנגשויות ופיזיקה',
    'Let me show you one more thing before we move on from bouncing balls.  What is called a partially elastic collision.':
        'תני לי להראות לך עוד משהו אחד לפני שנמשיך.<BR>זה נקרא התנגשות אלסטית חלקית.',
    'In the real world, when things collide, they usually bounce off each other slower than before.  That\'s why, when you drop a ball, it doesn\'t keep bouncing forever.':
        'בעולם האמיתי, כשדברים מתנגשים, הם בדרך כלל קופצים אחד מהשני במהירות איטית מהמהירות שלפני ההתנגשות.<BR>בגלל זה, כשאת זורקת כדור, הוא לא ממשיך לקפוץ לנצח.',
    'If you look at the code in update, there is now a friction force applied when the balls bounce off the walls.  It makes them bounce off slower than they came in.  Eventually, the balls all stop bouncing and slowly roll along the bottom.':
        'אם תסתכלי על הקוד ב-update, תראי שעכשיו יש שם כח חיכוך שמופעל כשהכדורים מתנגשים בקירות.<BR>זה גורם להם לזוז לאט יותר אחרי ההתנגשות.<BR>בסופו של דבר, כל הכדורים יפסיקו לקפוץ, ויתגלגלו לאט בתחתית.',
    'Cool simulation, and adds some realism.  Play with it a bit!  Change the friction, add more balls, increase gravity, change timeStep.  Try messing around with it!':
        'סימולציה מגניבה, שמוסיפה קצת מציאות.<BR>שחקי עם זה קצת!<BR>שני את החיכוך (friction), תוסיפי עוד כדורים, תגדילי את כח המשיכה (gravity), שני את מרווחי הזמן (timeStep).<BR>נסי להתעסק עם זה!',
    'Mouse Events': 'אירועי עכבר',
    'For our last lessons, let\'s work a bit with tracking the mouse.  This is a lot of fun!': 'לשיעורים האחרונים שלנו, בואי נעקוב אחרי העכבר.<BR>זה מאוד כיף!',
    'Here is a ball that sticks to the mouse.  Every time the mouse moves, the ball redraws on top of the mouse.':
        'הנה כדור שנדבק לעכבר.<BR>בכל פעם שהעכבר זז, הכדור מצוייר מעל העכבר.',
    'How does it work?  It starts by setting the variable pane to the element of the web page called \'pane\', which happens to be the one our drawing canvas is in.':
        'איך זה עובד?<BR>זה מתחיל בלאתחל משתנה pane עם האלמנט בדף שנקרא "pane", שהוא האלמנט שבתוכו נמצא הקנבס שלנו.',
    '<span class=tutor-code>pane.onmousemove = function(evt) {};</span> is really important.  That code binds a function to the <i>onmousemove</i> event on the \'pane\' element, which means this function is called any time the mouse moves inside the drawing canvas.':
        'מה שחשוב זה השורה <span class=tutor-code>;{} (pane.onmousemove = function(evt</span>.<BR>הקוד הזה מצמיד פונציה לאירוע <i>onmousemove</i> על האלמנט "pane".<BR>זה אומר שיקראו לפונקציה הזאת בכל פעם שמזיזים את העכבר בתוך הקנבס שלנו.',
    'Our function then asks the event where the mouse is (the <span class=tutor-code>clientX</span> and <span class=tutor-code>clientY</span>) and draws a big circle around it.  Make sense?':
        'ואז הפונקצייה שלנו שואלת את האירוע איפה העכבר נמצא (<span class=tutor-code>clientX</span> ו-<span class=tutor-code>clientY</span>) ומציירת עיגול גדול מסביבו.<BR>ברור?',
    'Springs and Physics': 'קפיצים ופיזיקה',
    'What\'s really cool about this is that we can combine it with animation.  Look at this!': 'מה שבאמת מגניב בזה זה שאנחנו יכולים לשלב את זה עם אנימציה.<BR>תסתכלי על זה!',
    'What this does is, every time the mouse moves in the canvas area, it sets <span class=tutor-code>mouseX</span> and <span class=tutor-code>mouseY</span> to the location of the mouse.':
        'מה שזה עושה זה שבכל פעם שעכבר זז באיזור הקנבס, הוא משנה את <span class=tutor-code>mouseX</span> ואת <span class=tutor-code>mouseY</span> לפי המיקום של העכבר.',
    'Then, when each ball is updated, it figures out how far away from the mouse it is, and accelerates toward it.':
        'ואז, כשכל כדור מתעדכן, הוא מחשב כמה רחוק הוא מהעכבר, ומאיץ לכיוונו.',
    'The acceleration is the square root of the distance, so it pulls harder when it is really far away.  Imagine all the balls being connected to the mouse by little rubber bands or springs.  It\'s a little like that.':
        'ההאצה היא השורש הריבועי של המרחק, אז הוא מאיץ יותר מהר כשהוא ממש רחוק.<BR>תדמייני שכל הכדורים מחוברים אל העכבר ברצועת גומי או בקפיץ.',
    'Try making the balls smaller!  And add more of them!  I like it with about 40 small balls chasing the mouse.':
        'נסי לעשות את הכדורים קטנים יותר!<BR>ותוסיפי עוד כדורים!<BR>אני אוהבת את זה עם 40 כדורים קטנים שרודפים אחרי העכבר.',
    'The End': 'הסוף',
    'Jump to a Lesson Section': 'רשימת שיעורים',
    'Lesson Sections': 'שיעורים',
    'Great job! Like what you learned? Was it fun?': 'עבודה מצויינת!<BR>אהבת את מה שלמדת? היה כיף?',
    'Wow, you did everything!  Congratulations, nice work!  A lot of these are really hard. I\'m impressed you finished!  I hope you enjoyed it!':
        'וואו, עשית את הכל! כל הכבוד, עבודה יפה!<BR>היו כאן כמה ממש קשים. אני מאוד מעריכה את זה שסיימת!<BR>אני מקווה שנהנית מזה!',
    'How to Play': 'איך לשחק',
    'About': 'על אודות',
    'FAQ': 'שאלות נפוצות',
    'Terms of Use': 'תנאי השימוש',
    'Privacy': 'פרטיות',
    'Contact': 'צור קשר',
    'Frequently Asked Questions': 'שאלות נפוצות',
    'Privacy Policy': 'מדיניות פרטיות',
    'Old Browser Warning': 'אזהרה לגבי דפדפנים ישנים',

    'Hi, I\'m Code Maven! (click on my words to see what\'s next)': 'אני אשפית הקוד! (צריך ללחוץ על מה שאני אומרת כדי להתקדם)',
    'Did you figure it out?  The numbers are how far from the left side to draw the box, how far from the top, how wide to draw the box, and how tall.': 'הבנת? המספרים קובעים כמה רחוק מצד שמאל, כמה רחוק מלמעלה, כמה רחבה תהיה התיבה וכמה גבוהה.',

    'Did you figure it out?  The numbers are how far from the left side to draw the box, how far from the top, how wide to draw the box, and how tall. So, it\'s <span class=tutor-code>c.fillRect(<i>left, top, width, height</i>);</span>':
      'הבנת? המספרים קובעים כמה רחוק מצד שמאל, כמה רחוק מלמעלה, כמה רחבה תהיה התיבה וכמה גבוהה. אז זה   <span class=tutor-code>;(<i>גובה, רוחב, למעלה, שמאל</i>)c.fillRect</span>',
    'How about something a little more challenging.  Can you change the numbers so that one box covers up the other?':
      'אולי משהו קצת יותר מאתגר.<BR>את יכולה לשנות את המספרים כך שתיבה אחת תכסה את השניה?',
    'Let\'s work with square boxes.  Square boxes have the same width and height.':
      'בואי נעבוד עם ריבועים.<BR>לריבועים יש את אותו רוחב וגובה.',
    'What would you change to move the box around?': 'מה היית משנה כדי להזיז את התיבה?',
    'I\'m going to make two boxes. Like this.': 'אני אעשה שתי תיבות. ככה:',
    'Both boxes are the same size squares because they are both using the variable named <span class=tutor-code>size</span> for width and height.': '',
    'Let\'s add more boxes.  Here are three boxes! Try changing size or move the boxes around.': '',
    'Even more boxes!  Try changing size now, maybe something smaller like 10 or 50?': '',
    'Look, color!  That\'s fun, isn\'t it?': '',
    'Many colors work.  Try "green" or "purple" or "gold"!': '',
    'Here is one pink and one silver.': '',
    'Here are two boxes that are the same color again.  Now can you make the two boxes different colors?': '',
    'Here is one version, red and blue.': '',
    'Huh, this does the same thing?  What could rgb() be?': '',
    'Whew, that\'s a hard one!  How close did you get?': '',
    'If you want to try others, put "olive", "purple", "aqua", or any other color you can think of as the color for the second box, then try to find the rgb numbers for the first box that match it!': '',
    'rgba() is a fun version of rgb(). See what this does?  It\'s got one more number at the end that\'s 0.5.  What is that last number doing? Try changing the 0.5 to 0.1.  Or to 0.8.  What does it do?': '',
    'And try changing the size from 80 to 180!  You can get some fun effects when the colors overlap. Play with it!': '',
    'Let\'s go back to variables. Variables make it easier to change what our code does. Let\'s use <span class=tutor-code>offset</span> for how far the first box is from the left and top.  Can you replace the <span class=tutor-code>20</span> numbers with <span class=tutor-code>offset</span>?': '',
    'Try moving the first box too.  Remember what do you have to change to move the first box?': '',
    'Can you put the boxes on top of each other so they overlap and it looks like just one box?': '',
    'Here\'s one way. It adds 60 to whatever <span class=tutor-code>offset</span> was before, and makes that the new value of <span class=tutor-code>offset</span>. Okay, now try changing what <span class=tutor-code>offset</span> is equal to at the beginning from 30 to 80.  See what happens?': '',
    'You can move both boxes together!  Change the offset and move \'em around!': '',
    'This looks the same, but it\'s a little different.  <span class=tutor-code>*</span> means multiply.  <span class=tutor-code>2 * 2</span> would be 4.  So, <span class=tutor-code>offset = offset * 3</span> means make offset three times bigger.': '',
    '<span class=tutor-code>*</span> means multiply and <span class=tutor-code>/</span> means divide.  So, when we set size equal to <span class=tutor-code>20 * 6 / 2 + 50 - 10</span>, that\'s just a complicated way of saying make size equal to 100.  Does that make sense?': '',
    'Try changing size to 150.  See what happens? Try changing size to 79.  Then change it to 80. Neat, isn\'t it!': '',
    'Okay, let\'s see what you know!  Here are two boxes.  Can you add a third box (also offset by 60 from the previous box)?': '',
    'Here\'s one way to do it. Try changing the size or offset!': '',
    'Remember rgba()? Don\'t you like what happens when transparent shapes overlap?  This is nice, but it would be even better with different colors.  Can you change this so the three boxes have different colors?': '',
    'Here\'s one way.  Awesome!  Try changing <span class=tutor-code>size</span> to make them bigger!  Or change <span class=tutor-code>offset</span> to move them around!  Or play with the red, blue, green, and alpha values to try different colors and transparencies!': '',
    'You know, I really don\'t like writing code more than once.  Look at this program.  There is lots of the same code in this program.  See how the exact same thing, <span class=tutor-code>c.fillRect(offset, offset, size, size)</span>, appears on three different lines?  And how we add 40 to <span class=tutor-code>offset</span> every time before we draw another box?': '',
    'Let me show you something.  This is called a <span class=tutor-code>for</span> loop.  It repeats code without writing it more than once.  Isn\'t that great?  Try changing the 3 to 5!': '',
    'Oh no!  They don\'t fit!  How can you make ten boxes fit?': '',
    'Smaller boxes also fit.  Try playing with size, offset, and changing the number of boxes!': '',
    'Let\'s play with rgba() again! What\'s this doing?': '',
    'Here is another one, this one changing alpha!  Isn\'t that fantastic?': '',
    'Let\'s do something different now.  Let\'s play with lines.  This is the code you use to draw lines in Javascript.  What do you think moveTo() does? lineTo()?': '',
    'Let\'s play with it.  Try changing 20 to 50. Try changing the other numbers too.  Can you figure out what moveTo() and lineTo() do?  How does this all work?': '',
    '<span class=tutor-code>moveTo(<i>left, top</i>)</span> moves the pen to a spot without drawing.  <span class=tutor-code>lineTo(<i>left, top</i>)</span> draws a line from wherever the pen is to a spot.': '',
    'You try it!  Can you add another line?.  Put a second c.lineTo() after the first.  Make your second line go to (50, 115).': '',
    'Now can you make a triangle?': '',
    'Huh, an orange triangle.  I think I\'d like blue better.  Can you make it blue?': '',
    'Oh no, I was trying to make two triangles, but forgot a moveTo().  See what happened?': '',
    'I think I\'m going to want a lot of triangles. This for loop draws two triangles.': '',
    'Look at this!  Forty green triangles!': '',
    'Let me show you something.  Here are two boxes, one using strokeRect(), the other using four lines.': '',
    'It takes a lot more code to draw it with lines. Can you add a third box?': '',
    'Functions that do a lot of work for you, like strokeRect(), make coding easier.  Here are three boxes with all of them using strokeRect(). Can you add a fourth?': '',
    'What if we want even more boxes?  I guess we\'d have to keep adding lines with c.strokeRect()? Or is there an easier way?': '',
    'I know!  Let\'s use a for loop!  Now can you make more boxes?': '',
    'This works by having <span class=tutor-code>i</span> count up 1, 2, 3... then putting each box\'s (left, top) at <span class=tutor-code>i * offset</span>. Since offset is 20, the top left of the first box is (20, 20), the second is at (40, 40), then (60, 60) ...': '',
    'Try changing <span class=tutor-code>num</span>, <span class=tutor-code>size</span>, and <span class=tutor-code>offset</span>.  See what happens?  Play with it!': '',
    'It\'s often good to have variables that control things in your code (like <span class=tutor-code>num</span>, <span class=tutor-code>size</span>, and <span class=tutor-code>offset</span>) together so they are easy to change.': '',
    'Can you show me some of what you know? Draw a box. <br>Hint: Remember <span class=tutor-code>c.strokeRect(<i>left, top, width, height</i>);</span>': '',
    'Now can you draw four boxes? Hint: Making four boxes is easy using for. Remember, a for loop look like this: <span class=tutor-code>for (var i = 0; i < 3; i += 1) {</span>': '',
    'Wow, you\'re learning to program!  Lots of ways you could do this, but did you get something like this? If not, try changing it, figure out how it works!': '',
    'Copied code that says the same thing as other code is hard to change.  You know how for loops avoid repeating the same code, right?  Functions also avoid repeating. Let me show you how to write your own functions.': '',
    'I just made a new function, strokeSquare().  It is just like strokeRect(), but draws squares.': '',
    'strokeSquare() uses strokeRect() to draw a rectangle with the same width and height. See how it works? strokeSquare() only takes a size, not both a width and height, and then tells strokeRect() that both the width and height are size.': '',
    'So, the first square starts at (30, 100) and then has a height and width of 50.': '',
    'Let\'s talk about how this works in a little more detail.  <span class=tutor-code>function strokeSquare</span> creates a new function called strokeSquare. <span class=tutor-code>(left, top, size)</span> are the <i>parameters</i> to the function and act like variables inside the function.  The code inside the brackets (the <span class=tutor-code>{</span> and <span class=tutor-code>}</span>) is the <i>function body</i> contains all the code that is run every time you call the function.': '',
    '<span class=tutor-code>strokeSquare(30, 100, 50);</span> calls the code in the function body of strokeSquare, with <span class=tutor-code>left</span> set equal to 30, <span class=tutor-code>top</span> to 100, and <span class=tutor-code>size</span> to 50.  That code uses c.strokeRect() to draw us a square.  See how that works?': '',
    'Making your own functions is really useful.  It makes it easier to program.': '',
    'Now for something completely different.  A star! I like that! Do you like stars too? If you want, you can change some of the numbers and mess it up! Try it!': '',
    'A solid gold star! Did you know you can do that? What\'s different?  How did I make the star solid?': '',
    'Just like <span class=tutor-code>c.stroke()</span> draws lines in whatever color <span class=tutor-code>c.strokeStyle</span> is set to, <span class=tutor-code>c.fill()</span> fills a shape with whatever color <span class=tutor-code>c.fillStyle</span> is. It\'s that fun?': '',
    'Variables make it easy to change and add more stars. Try changing <span class=tutor-code>x</span>, <span class=tutor-code>y</span>, and <span class=tutor-code>size</span> (or anything else)!': '',
    'Here are two stars, but look at all that code!  Most of it is the same too, just copied, repeating over and over. That doesn\'t seem like the best way to do two stars. What can we do?': '',
    'Wow, four stars in a row using functions and for loops!  See how this works?  Can you make it eight stars?': '',
    'Two loops to make rows of stars!  Try changing <span class=tutor-code>size</span> to make them bigger!': '',
    'Look at the inner loop.  <span class=tutor-code>j</span> will count 0, 1, 2.  The first time <span class=tutor-code>j</span> counts 0, 1, 2, <span class=tutor-code>i</span> will be 0.  The next time j counts 0, 1, 2, i will be 1.': '',
    'How does this program fill the drawing area with stars?  How does it know how many stars will fit?': '',
    '<span class=tutor-code>c.canvas.width</span> is a way of getting the width of the drawing area.  <span class=tutor-code>size</span> is a width of a star.  So, <span class=tutor-code>c.canvas.width / size</span> is how many stars will fit across.': '',
    'The code does something similar with the height to figure out how many stars fit up-and-down.  The Math.floor() is just a way of rounding, it drops fractions off (so, for example. <span class=tutor-code>Math.floor(7.8)</span> is 7). Now do you see how it works?': '',
    'So, how does this work?  <span class=tutor-code>n</span> is the number of stars.  <span class=tutor-code>size</span> is the size of the stars. <span class=tutor-code>c.fillStyle</span> is the color of the stars.  But how does it place them randomly?': '',
    '<span class=tutor-code>Math.random()</span> gives us a random number between 0.0 and 1.0, a different one each time we use it.': '',
    'See the line <span class=tutor-code>var x = (w - size) * Math.random()</span>?  That figures out how far across to put the star.  Can you figure out what exactly it is doing?': '',
    'It takes the width of the drawing area (which is <span class=tutor-code>c.canvas.width</span> and stored in the variable called <span class=tutor-code>w</span>), subtracts off the <span class=tutor-code>size</span> (so the star will fit), and then multiplies by a random number between 0.0 and 1.0.  So, if the random number is 0.5, the star will appear about halfway across.': '',
    'The code does something similar with <span class=tutor-code>c.canvas.height</span> to determine where to put the star vertically.  Does it make more sense now?': '',
    'I\'m tired of seeing stars.  Let\'s go back to lines.  Here are two separate lines. But see how much code is repeated? You know that isn\'t good. What can we do?': '',
    'Functions!  We need a drawLine() function so we can draw lines more easily.  Let me write that for you. Ta dah! Can you use this new function to draw one line from (20, 20) to (200, 20) and another from (20, 50) to (200, 50)?': '',
    'Ten lines coming to a point.  That\'s kind of cool, isn\'t it? Try moving the point!': '',
    'Did you get it?  There should be a second drawLine() and starting from the left means x1 in drawLine() should be 0.': '',
    'This is one way to do it.  Try moving the point now!  Fun, isn\'t it?': '',
    'Hey, look at this!  Isn\'t that cool?  It uses the drawing area width and height now to fit in as many lines as it can!  Try changing num, px, or py!': '',
    'See how it works?  The first drawLine() draws lines from (w, y) to (px, py). <span class=tutor-code>w</span> is always the same and is the width of the drawing area.  <span class=tutor-code>y</span> starts at 0 and increases until it is the height of the drawing area. So, it draws all those lines that go to the right side.': '',
    'The second drawLine() does something similar for all the lines going to the bottom, drawing from (x, h) to (px, py).': '',
    'Sometimes, when I get bored in class, I draw these.  Do you like them too?  Can you make it so it is drawn with even more lines?': '',
    'Here is a crazy fun random colors changing version.  It\'s complicated, but take a look.  Can you guess how it works?': '',
    'Wow, it\'s great with thicker lines!  Play with it some more!  Try changing it so it draws the curves using more lines!': '',
    'I drew one line, but just one line is boring. Don\'t you want more? It would be easier to add more lines if we had that drawLine() function again.  Can you write that and then make this line use it? Hint: Remember a function is declared like this, <span class=tutor-code>function doStuff(a, b, c, d) {</span>': '',
    'Ahh, isn\'t that better?  Now, can you add another line below this one?': '',
    'Isn\'t it easier to add more lines after you created that function?': '',
    'It\'s so easy to add more lines, I think we should add lots more!  Give me ten lines total, one on top of the other, separated by 10! Hint: This is easier with a for loop. For loops look like <span class=tutor-code>for (var i = 0; i < 3; i += 1) {</span>': '',
    'Did you get something like this?  You\'re getting good!  Try playing with the numbers! I like n of 40 and dy of 5!': '',
    'Feels like forever since we saw a box, I\'m starting to miss them.  Hey, look, boxes can erase!  Try moving the white box from (50, 50) to (20, 20)!': '',
    'That\'s pretty funny, isn\'t it?  It\'s cute!': '',
    'A purple box.  But, wait, how did it get that far away from the edge?  Try changing x and y.': '',
    'The fillRect() says to make the (left, top) at (0, 0), so wouldn\'t you think the box would be at the upper left corner? But what is translate()?': '',
    'Why does this do what it does?  It looks like it uses translate() twice.  They seem to add to each other, right?': '',
    'What will happen if you uncomment save() and restore()? Try it. Was it what you expected?': '',
    'Did you notice that this box is pivoting through its top left corner when you rotate it?  That\'s the same spot we said to go with translate().': '',
    'Here\'s one way. See how the translate() is to a different spot?': '',
    'Try changing angle now!  Did you try a negative number of angle like -0.2?': '',
    'Boxes rotated relative to their center are usually what you want.  Look, I made you a function that makes boxes rotated to different angles!  Can you use this new strokeSquare() function to add a few more boxes? Rotate your new boxes at any angle you want!': '',
    'Are you a coder now? Show me! Draw a box rotated by -0.5.  Hint: Use c.rotate(); and c.strokeRect();': '',
    'Oh, is that too easy? You want harder problems? Draw five boxes on top of each other, each rotated by 0.3 more than the last!<br>Hint: c.translate() might be useful<br>Hint: For loops look like <span class=tutor-code>for (var i = 0; i < 5; i += 1) {</span>': '',
    'Wow, look at how much you\'ve done! You\'re ready for a big fun challenge!': '',
    'Let\'s say we want to try to draw a tree.  How might we do that?': '',
    'That\'s a lot of work.  That\'s not fun.  There\'s got to be an easier way.': '',
    'I\'ll try using variables.  Does that make it easier?  I\'m not sure it does. What do you think?': '',
    'That\'s still too much work. A for loop maybe?  How might that work? I don\'t know.  How would we draw two branches from every branch? I\'m not sure.  What do you think?': '',
    'No, I can\'t see a way to draw trees easily using a for loop.  What else do we have?  Can we use functions?': '',
    'Let\'s start with a function that draws a branch.  Here\'s one.  It takes four numbers, <span class=tutor-code>x</span> and <span class=tutor-code>y</span> which say where to start, the length <span class=tutor-code>l</span>, and the <span class=tutor-code>direction</span> which says whether to draw left, right, or straight.': '',
    'Ah, I know, make the function use itself! Can you see what this is doing?': '',
    'Functions that call themselves, that\'s crazy! Here\'s a version with some more variables to control it.  That makes it easier to twiddle.  Try playing with it!  Change <span class=tutor-code>xScale</span>, <span class=tutor-code>yScale</span>, or <span class=tutor-code>minLength</span>!  Cool, huh?': '',
    'There are a couple new things here.  I\'ll stop to explain.': '',
    'It does a translate() to the bottom right corner of the box, then draws the box back up behind it, so a box size big starting at (-size, -size).  Then, as long as the boxes haven\'t gotten too small, it does that again by calling itself, but shrinking the size of the box the next time.': '',
    'You can change them if you want!  Experiment!': '',
    'Back to trees.  Wow, look!  An even better tree!': '',
    'See how this works? It starts by rotating in the direction it is supposed to (<span class=tutor-code>direction</span> is -1 for left, 1 for right).  If the branches are not too short yet, it translates to the end of a branch, then draws two more shorter branches, one to the left, one to the right.': '',
    'The save() and restore() make it so that, when the program finishes drawing a left branch, the restore() removes the rotate and translate, getting us back to the right spot to do a right branch.': '',
    'Here is one version.  That\'s not too bad.  You know what might make it even better? Can you make the <span class=tutor-code>branchScale</span> more random too?': '',
    'Oh wow!  Some of these look a lot like trees, don\'t they?': '',
    'This plant is going to split off two branches, one going up, one going off to the side.  We want the ones going off to the side to alternative, first right, then left, then right, then left.': '',
    'Oh no!  What did you do?': '',
    'So, that didn\'t do what you expected, did it?': '',
    'Do you know have this?  Wow, nice work!': '',
    '<span class=tutor-code>%</span> means modulo, it gives the remainder after dividing.': '',
    'See how many ways there are to solve a problem like this?  There is usually not just one solution to something you want to do, lots of things might work.  Isn\'t that great?': '',
    'The really new thing is <span class=tutor-code>setTimeout(<i>functionName</i>, <i>waitTimeInMilliseconds</i>)</span>;  That says to call a function a little while later.': '',
    'So, the way this code works is that, every time we are told to do drawStep(), we erase the screen, draw the box, and, unless we hit the edge, we then move the box and ask to call drawStep() again after waiting a little bit.': '',
    'Spinning a box! That\'s a fun idea! Can you make it go faster?': '',
    'You know, I have a secret.  I\'ve been hiding something from you.': '',
    'I added some code for you to get that object from the web page and put it in a variable named <span class=tutor-code>c</span>, so you could use it.  Let me show you what that hidden code looks like.': '',
    'There is a big new thing here.  I\'ll explain it.': '',
    '<span class=tutor-code>boxes.push()</span> adds something to the end of the list.  Here, we use it to add a new box.  Because it is in a for loop that counts 0, 1, 2, we will add three boxes to the end of the list.': '',
    'Can you add more boxes?  You\'ll have to change three things to fit them all on the canvas, but I bet you can figure it out.  I liked it with 60 of them. It looks really weird!': '',
    'All those fast spinning boxes make me dizzy!  Let\'s slow it down again and let me show you something else.  We can move the update into each Box object.  That will be handy when we make the update do more.  See what this does now?': '',
    'Do you see it?  Now, every time we update() on a Ball, we change the downward velocity (<span class=tutor-code>dy</span>) by whatever gravity is.': '',
    'Let me show you one more thing before we move on from bouncing balls.  This is called a partially elastic collision.': '',
    'I\'ve got an idea.  Can you change this so that the balls run away from the mouse?  Right now they are attracted to the mouse. Can you make them be repelled?': '',
    'Did you figure it out?  You\'ll want to change the direction of the acceleration.  You might also want to make the acceleration stronger when the mouse is close instead of stronger when it is far away.  Take a look, try to do it!': '',
    'Here\'s how I did it!  See how this works?': '',
    'Try adding more balls, making the balls smaller, or increasing the acceleration!  Look at them run away!  Isn\'t that great?': '',
    'Now that we have these classes, it\'s easy to make other fun games!  Look, just a few small changes and we have the balls chasing each other!': '',
    'The way this works is that we created an accel() function for Ball objects, then we call that before we call update().  For the first ball, we accel() toward the mouse.  For all the others, we accel() toward the previous ball.  All it took was just a couple changes!  Isn\'t that great?': '',
    'Look at this!  Just a few other changes and the balls chase the mouse, but scatter when the mouse button is down.  Try clicking and see!': '',
    'I can\'t resist showing you one more! These are so easy to do now!  In this one, the balls try to go to the mouse, but also try to stay away from each other.  Cool, isn\'t it?': '',
    'Great job! Do you feel like you now know a bit about programming? What do you think about programming?  Is it fun?': '',
};

let count = 0;
const notFound = [];
const boy = localStorage.Gender === 'boy';
const getString = boy ? s => (t[s] || '')
    .replace(/את יכולה/g, 'אתה יכול')
    .replace(/את כבר יכולה/g, 'אתה כבר יכול')
    .replace(/את צריכה/g, 'אתה צריך')
    .replace(/את מתקרבת/g, 'אתה מתקרב')
    .replace(/את מכניסה/g, 'אתה מכניס')
    .replace(/שאת מנסה/g, 'שאתה מנסה')
    .replace(/תכנסי/g, 'תכנס')
    .replace(/נסי /g, 'נסה ')
    .replace(/תנסי/g, 'תנסה')
    .replace(/ותראי/g, 'ותראה')
    .replace(/תראי/g, 'תראה')
    .replace(/את מבינה/g, 'אתה מבין')
    .replace(/את כנראה/g, 'אתה כנראה')
    .replace(/את תצטרכי/g, 'אתה תצטרך')
    .replace(/תשכחי/g, 'תשכח')
    .replace(/מבינה/g, 'מבין')
    .replace(/שחקי/g, 'שחק')
    .replace(/עקבי/g, 'עקוב')
    .replace(/הוסיפי/g, 'הוסף')
    .replace(/עצרי/g, 'עצור')
    .replace(/שבי וחשבי/g, 'שב וחשוב')
    .replace(/תצטרכי/g, 'תצטרך')
    .replace(/תוציאי/g, 'תוציא')
    .replace(/את מוכנה/g, 'אתה מוכן')
    .replace(/מוכנה/g, 'מוכן')
    .replace(/את אוהבת/g, 'אתה אוהב')
    .replace(/את קוראת/g, 'אתה קורא')
    .replace(/את אמורה/g, 'אתה אמור')
    .replace(/את רגילה/g, 'אתה רגיל')
    .replace(/את משנה/g, 'אתה משנה')
    .replace(/את עדיין/g, 'אתה עדיין')
    .replace(/את זורקת/g, 'אתה זורק')
    .replace(/את זוכרת/g, 'אתה זוכר')
    .replace(/זוכרת/g, 'זוכר')
    .replace(/זכרי/g, 'זכור')
    .replace(/צריכה/g, 'צריך')
    .replace(/את מתכנתת/g, 'אתה מתכנת')
    .replace(/את רואה/g, 'אתה רואה')
    .replace(/את רוצה/g, 'אתה רוצה')
    .replace(/את לא/g, 'אתה לא')
    .replace(/שני את/g, 'שנה את')
    .replace(/את יודעת/g, 'אתה יודע')
    .replace(/את כבר יודעת/g, 'אתה כבר יודע')
    .replace(/יודעת לתכנת/g, 'יודע לתכנת')
    .replace(/תייצרי/g, 'תייצר')
    .replace(/תוסיפי/g, 'תוסיף')
    .replace(/תגדירי/g, 'תגדיר')
    .replace(/תמחקי/g, 'תמחק')
    .replace(/תרצי/g, 'תרצה')
    .replace(/תעשי/g, 'תעשה')
    .replace(/ציירי /g, 'צייר ')
    .replace(/תשתמשי/g, 'תשתמש')
    .replace(/תראי/g, 'תראה')
    .replace(/תסתכלי/g, 'תסתכל')
    .replace(/תכתבי/g, 'תכתוב')
    .replace(/תצליחי/g, 'תצליח')
    .replace(/תרשי/g, 'תרשה')
    .replace(/תתחילי/g, 'תתחיל')
    .replace(/תדמייני/g, 'תדמיין')
    .replace(/תגדילי/g, 'תגדיל')
    .replace(/מצליחה/g, 'מצליח')
    .replace(/גומרת/g, 'גומר')
    .replace(/תעצרי/g, 'תעצור')
    .replace(/תביני/g, 'תבין')
    .replace(/תמשיכי/g, 'תמשיך')
    .replace(/את חושבת/g, 'אתה חושב')
    .replace(/חושבת/g, 'חושב')
    .replace(/תוכלי/g, 'תוכל')
    .replace(/תני לי/g, 'תן לי')
    .replace(/בואי/g, 'בוא')
    .replace(/את משתפרת/g, 'אתה משתפר') : s => t[s];

document.styleSheets[0].insertRule('h3, ol, .simplemodal-data .heb { direction: rtl; }', 1);

const w = unsafeWindow;
if (w.lessons) {
    w.lessons.forEach(l => {
        if (l.message) {
            const n = getString(l.message);
            if (n) {
                l.message = n;
                ++count;
            } else {
                notFound.push(l.message);
            }
        }

        if (l.lessonSection) {
            const n = getString(l.lessonSection);
            if (n) {
                l.lessonSection = n;
                ++count;
            } else {
                notFound.push(l.lessonSection);
            }
        }
    });
}

if (w.updatePreview) {
    w.eval(w.updatePreview.toString().replace('updatePreview', 'updatePreviewNew').replace('Great, you did it!', 'מעולה, עשית זאת!').replace('you did it!', 'עשית זאת!'));
    w.updatePreview = w.updatePreviewNew;
}

if (w.initCode) {
    w.initCode();
}

if (w.initLesson) {
    w.initLesson();
}


const $ = w.$;
$('h3, li a, span.info-link').each((i, el) => {
    el = $(el)
    const current = el.text();
    var s = getString(current);
    if (s) {
        el.text(s);
        $('#' + current.toLowerCase().replace(/\s+/g, '-')).attr('id', s.toLowerCase().replace(/\s+/g, '-'));
        ++count;
    } else {
        notFound.push(current);
    }

});

$('#code-maven > div.section-title').html('אשפית הקוד');
$('#code-maven > div.section-subtitle').html('(לנוער ולמבוגרים)');
$('#code-monster > div.section-title').html('תכנותפלצת');
$('#code-monster > div.section-subtitle').html('(לילדים ולנוער)');
$('#game-maven > div.section-title').html('אשפית המשחק');
$('#game-maven > div.section-subtitle').html('(קשה, מגיל 16 ומעלה)');
$('#data-maven > div.section-title').html('אשפית המידע');
$('#data-maven > div.section-subtitle').html('(סטטיסטיקה, מגיל 12 ומעלה)');

$('#back-button').html('חזרה');
$('#reset-button').html('איפוס');
$('#tutor-message').css('direction', 'rtl');
$('<form onclick="localStorage.Gender = document.forms.GenderForm.Gender.value; location.reload();" ' +
    ' name="GenderForm" style="direction: rtl;"><label style="margin: 0 20px;"><input type="radio" name="Gender" value="boy" ' + (boy ? 'checked' : '') +
    '>אני בן</label><label><input type="radio" name="Gender" value="girl" ' + (boy ? '' : 'checked') +
    '>אני בת</label></form>').insertAfter($('#info-links'));
w.console.log('Translate User Script:', count + ' strings was replaced, ' + notFound.length + ' still not found - ' + Math.round(count * 100 / (count + notFound.length)) + '% done.');
if (notFound.length) {
    w.console.log('Not found:');
    notFound.forEach(s => console.log(`'${s.replace(/'/g, '\\\'')}': '',`))
}