Commits

Yeuk Hon Wong committed cf7a01f Draft

FInal

Comments (0)

Files changed (2)

 			<img src="pictures/cover.jpg" alt="">
 		</section>
 	</div></div>
-	<div class="slide" id="Header"><div>
-		<section>
-			<header>
-				<h2>Header</h2>
-			</header>
-			<p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash <em>your</em> browser.</p>
-			<p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
+   <div class="slide" id="3">
+    <div>
+        <section>
+            <header>
+                <h2> Hear me out </h2>
+            </header>
+        <ol>
+            <li> <strong>NO</strong> food or drink in this room! </li>
+            <li> Put your phone on vibrate </li>
+            <li> Turn off your laptop's volume </li>
+            <li> Ask me questions when you don't understand!</li>
+        </ol>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="goals">
+    <div>
+        <section>
+           <header>
+                <h2>Goals</h2>
+           </header>
+            <p> We want to write a program to calculate total value of coins and dollar bills we have.</p>
+            <ol>
+                <li>It knows about the value of each coin and each bill.</li>
+                <li>It needs to output the total.</li>
+                <li>It asks the human for the number of coins and bills.</li>
+                <li>It should be correct and reliable.</li>
+            </ol>
+        </section>
+    </div></div>
+
+    <div class="slide shout" id="snippet1">
+    <div>
+        <section>
+           <header>
+                <h2><a href="http://pastebin.com/4BVtqzmc">dollars1.py </a>
+           </header>
+        </section>
+    </div></div>
+
+
+    <div class="slide" id="goals2">
+    <div>
+        <section>
+           <header>
+                <h2>Goals: Re-visit</h2>
+           </header>
+            <p> We want to write a program to calculate total value of coins and dollar bills we have.</p>
+            <ol>
+                <li><span style="color:grey">It knows about the value of each coin and each bill.</span></li>
+                <li><span style="color:grey">It needs to output the total.</span></li>
+                <li>It asks the human for the number of coins and bills.</li>
+                <li>It should be correct and reliable.</li>
+            </ol>
+        </section>
+    </div></div>
+
+    <div class="slide shout" id="topic1">
+    <div>
+        <section>
+            <header>
+                <h2> Binding, Names, Object</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="variables">
+    <div>
+        <section>
+            <header>
+                <h2> Variables </h2>
+            </header>
+        <center><img src="http://yozh.org/wp/wp-content/uploads/2010/10/slope_formula_bones.png" /></center>
+        <p> Fill in the blanks? </p>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="variables-in-programming">
+    <div>
+        <section>
+            <header>
+                <h2> Variables in Programming </h2>
+            </header>
+
+        <P>The same concept from math applies in programming. Variables are names to some data. e.g an integer, a shape, or a function <mark>f(x)</mark> or even a piece of code. 
+        <br />
+        The equal sign <mark>=</mark> is usually denoted as <u>assignment</u></p>
+
+        <pre>
+            <code>penny = 0.01</code>
+            <code>nickel = 0.05</code>
+            <code>my_name = 'John Yeukhon Wong'</code>
+        </pre>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="binding-in-python-is-dynamic">
+    <div>
+        <section>
+            <header>
+                <h2> Binding in Python is dynamic</h2>
+            </header>
+        <p>In Python, variables and data are in an open relationship. <strong>No commitment.</strong>
+        <br /> What do you think this snippet will produce? </p>
+        <pre>
+        <code>penny = 0.01</code>
+        <code>penny = "Sheldon!"</code>
+        <code><mark>print </mark></code>
+        </pre>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="everything-in-python-is-an-object">
+    <div>
+        <section>
+            <header>
+                <h2> Everything in Python is an Object</h2>
+            </header>
+       <mark>Object</mark> is like a bio info <br />
+        <ul>
+            <li><u>identity</u> </li>e.g an id of the object
+            <li><u>type</u> </li> e.g int, float, string, list, dict, or even Person and Cat?
+            <li><u>value</u> </li> the actual data you care about (a number, a function, etc)
+        </ul>
+        </section>
+    </div>
+    </div>
+
+
+    <div class="slide" id="put-everything-together-variable">
+    <div>
+        <section>
+            <header>
+                <h2> Put everything together about variables</h2>
+            </header>
+       <u>var1.py</u>
+        <pre>
+            <code><mark>penny = 0.01</mark></code>
+            <code>penny = "Sheldon!"</code>
+            <code>print penny</code>
+        </pre>
+        <img src="images/b1.jpg" />
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="put-everything-together-variable2">
+    <div>
+        <section>
+       <u>var1.py</u>
+        <pre>
+            <code>penny = 0.01</code>
+            <code><mark>penny = 'GANGNAM STYLE? YEP!</mark></code>
+            <code>print penny</code>
+        </pre>
+        <img src="images/b2.jpg" />
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="remark-on-variables">
+    <div>
+        <section>
+            <header>
+                <h2> Remarks on variables</h2>
+            </header>
+        <p>The variable <mark>penny</mark> is used to bind to a string later on, and the name just sucks. Good programmers use good names. In this case, just give a new variable. Variables are so cheap ... </p>
+        <pre>
+        <code>penny = 0.01</code>
+        <code>gangnam_text = 'GANGNAM STYLE? YEP!</code>
+        </pre>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide shout" id="data-type-cover">
+    <div>
+        <section>
+            <header>
+                <h2>built-in data types</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="how-data-type">
+    <div>
+        <section><header>
+            <h2>Python knows a lot about human</h2>
+        </header>
+        </section>
+    </div></div>
+
+    <div class="slide shout" id="number-cover">
+    <div>
+        <section>
+            <header>
+                <h2>numbers</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+
+    <div class="slide" id="numbers-data-type">
+    <div>
+        <section>
+            <header>
+                <h2> Numbers</h2>
+            </header>
+       <p>In Python there are four main built-in numberic types:
+        <ul>
+            <li>int</li>
+            <li>float</li>
+            <li>long</li>
+            <li>complex</li>
+        </ul>
+        </p>
+       </section>
+    </div>
+    </div>
+
+    <div class="slide" id="numbers-int">
+    <div>
+        <section>
+            <header>
+                <h2> Numbers: <mark>int</mark></h2>
+            </header>
+    <pre>
+        <code>number1 = 10</code>
+    </pre>
+    <p class="note">number1 now binds to an integer 10</p>
+    <pre>
+        <code><mark>type</mark>(number1)</code>
+        <code>&lt;type 'int'&gt;</code>
+    </pre>
+    <p class="note">The <i>type</i> function tells us the type of object number1 points to.</p>
+       </section>
+    </div>
+    </div>
+
+    <div class="slide" id="numbers-float-long">
+    <div>
+        <section>
+            <header>
+                <h2> Numbers: <mark>float</mark> and <mark>long</mark></h2>
+            </header>
+    <pre>
+        <code>number2 = 3.14</code>
+    </pre>
+    <p class="note">number2 now binds to a real number 3.14 <br /> <mark>float</mark> is basically a real number.</p>
+    <pre>
+        <code>number3 = 10343435129232</code>
+    </pre>
+    <p class="note">Long integers will use <mark>long</mark>.</p>
+    </section>
+    </div>
+    </div>
+
+    <div class="slide shout" id="string-cover">
+    <div>
+        <section>
+            <header>
+                <h2>strings</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+
+    <div class="slide" id="strings">
+    <div>
+        <section>
+            <header>
+                <h2> String </h2>
+            </header>
+    <pre>
+        <code> <mark>'</mark>This is a string<mark>'</mark> </code>
+        <code> <mark>"</mark>I use double quote<mark>"</mark> </code>
+    </pre>
+    <p class="note"> Strings are defined either with single or double quotes</p>
+    <pre>
+        <code><mark>"""</mark> Hello, <br \>   Second line <mark>"""</mark></code>
+   </pre>
+    <p class="note"> We can use the triple code for multi-line text</p>
+    
+    </section>
+    </div>
+    </div>
+
+    <div class="slide shout" id="bool-cover">
+    <div>
+        <section>
+            <header>
+                <h2>boolean values</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+
+    <div class="slide" id="boolean-true">
+    <div>
+        <section>
+            <header>
+                <h2> Boolean: True </h2>
+            </header>
+    <p> <strong>True</strong> if it is: <br />
+            <ul>
+            <li>True</li>
+            <li>1</li>
+            <li>Any number other than 0</li>
+            <li>an object's value is not <mark>None</mark> or <mark>False</mark></li>
+            </ul>
+    </p>
+   </section>
+    </div>
+    </div>
+
+
+    <div class="slide" id="boolean-false">
+    <div>
+        <section>
+            <header>
+                <h2> Boolean: False </h2>
+            </header>
+    <p> <strong>False</strong> if it is: <br />
+            <ul>
+            <li>False</li>
+            <li>0</li>
+            <li>any object has a value <mark>None</mark></li>
+            </ul>
+    </p>
+   </section>
+    </div>
+    </div>
+
+    <div class="slide shout" id="none-cover">
+    <div>
+        <section>
+            <header>
+                <h2>None ...</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="none-value">
+    <div>
+        <section>
+            <header>
+                <h2> None</h2>
+            </header>
+    <p>This is a bit advance but usually you see a <mark>None</mark> which is a <mark>NoneType</mark> when a function returns no value expliclity (whether it's a number, a string, a boolean, or even some complex object). </p>
+    <p><mark>None</mark> is considered a <mark>False</mark> value</p>
+
+   </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="expression">
+    <div>
+        <section>
+            <header>
+                <h2> expression</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="expression-1">
+    <div>
+        <section>
+            <header>
+                <h2> Python expression </h2>
+            </header>
+        <p> Anything that is reduced to a value and no side-effect (simplified version).</p>
+    <pre>
+        <code>0.01</code>
+        <code>pennies * penny</code>
+        <code>pennies * penny + nickels * nickel</code>
+        <code><mark>total = pennis * penny + .... hundreds * hundred </mark></code>
+    </pre>
+    <p class="note">The last one is <strong>NOT</strong> an expression.</p>
+</section>
+</div>
+</div>
+
+
+<div class="slide shout" id="statement">
+    <div>
+        <section>
+            <header>
+                <h2>statement</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="statement-1">
+    <div>
+        <section>
+            <header>
+                <h2> Python statement </h2>
+            </header>
+        <p> A statement is basically anything that does something and cause side effect. </p>
+        <pre>
+        <code>penny= 0.01</code>
+        <code>total = pennis * penny + .... hundreds * hundred</code>
+        <code>var1 = 'hello'</code>
+        <code>if var1 == 'hello': <br />    print 'var1 is hello'</code>
+        </pre>
+        <p class="note">Line #1 is a statement, a.k.a assignment statement. <br \>Line #2 is another assignment statement made up of a bunch of arihemtic expressions. <br \>Line #3 and #4 are a block of statement a.k.a logical statements.</p>
+</div>
+</div>
+
+<div class="slide shout" id="revisit-dollars-cover">
+    <div>
+        <section>
+            <header>
+                <h2> <a href="http://pastebin.com/4BVtqzmc">dollars.py</a></h2>
+            </header>
+        <p>Is this really correct?</p>
+        </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="assert-cover">
+<div>
+    <section>
+    <header><h2> assert </h2></header></section></div></div> 
+<div class="slide" id="assert-slide">
+<div><section><header><h2>Use <mark>assert</mark></h2></header>
+<pre><code>assert total == 101.25</code></pre>
+<p class="note"><mark>assert</mark> tests whether the logical expression is True or False. It fails if the logical expression fails.</p>
+<p>In general, you should always test your code all the time. <mark>assert</mark> is not the way to test your code. I will show you in the workshop how to use <mark>unittest</mark>.</p>
+</div></div>
+
+        <div class="slide" id="assert-slide2">
+        <div><section><header><h2>Use <mark>assert</mark></h2></header>
+        <pre><code>assert not not total == 101.25</code>
+            <code>assert total &lt;= 101.25</code></pre>
+        <p class="note">Which one of them will fail the <mark>assert</mark> test?</p>
+		</div></div>
+
+<div class="slide shout" id="decision-cover">
+    <div>
+        <section>
+            <header>
+                <h2> if ... </h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="if">
+    <div>
+        <section>
+            <header>
+                <h2> if</h2>
+            </header>
+        <pre>
+            <code><mark>if</mark> &lt;expression&gt;<mark>:</mark></code>
+            <code>   do_stuff</code>
+        </pre>
+        <p class="note"><i>expression</i> could be any valid Python expression.</p>
+        <pre>
+        <code>if <mark>var1 == 'hello'</mark>: <br />    print 'var1 is hello'</code>
+        </pre>
+        <p class="note">The comparison <mark>var1 == 'hello'</mark> evaluates to a value so that's an expression.</p>
+   </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="if-else-cover">
+    <div>
+        <section>
+            <header>
+                <h2> if ... else ...</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+
+    <div class="slide" id="if-else">
+    <div>
+        <section>
+            <header>
+                <h2> if-else </h2>
+            </header>
+        Sometimes we want either case to happen. <mark>else</mark> is usually used as default case.
+        <pre>
+            <code><mark>if</mark> &lt;expression&gt;<mark>:</mark></code>
+            <code>   do_stuff</code>
+            <code><mark>else:</mark></code>
+            <code>   do_something_else</code>
+      </pre>
+   </section>
+    </div>
+    </div> 
+
+<div class="slide shout" id="if-elif-else-cover">
+    <div>
+        <section>
+            <header>
+                <h2> if ... elif ... else ...</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="if-elif-else">
+    <div>
+        <section>
+            <header>
+                <h2> if-elif-else </h2>
+            </header>
+        Very often we have more than two decisions to make.
+        <pre>
+            <code><mark>if</mark> &lt;expression&gt;<mark>:</mark></code>
+            <code>   do_stuff</code>
+            <code><mark>elif</mark> &lt;expression&gt;<mark>:</mark></code>
+            <code>   do_something_2</code>
+            <code><mark>else:</mark></code>
+            <code>   do_something_else</code>
+      </pre>
+   </section>
+    </div>
+    </div>
+
+    <div class="slide" id="if-elif-else-2">
+    <div>
+        <section>
+            <header>
+                <h2> if-elif-else </h2>
+            </header>
+        <pre>
+            <code>position = get_curr_position(my_map)</code>
+            <code>if position == 1:</code>
+            <code>   print 'Position is at 1'</code>
+            <code>elif position == 2:</code>
+            <code>   print 'Position is at 2'</code>
+            <code>else:</code>
+            <code>   print 'current position is at :', position</code>
+      </pre>
+   </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="comparison-operators">
+    <div>
+        <section>
+            <header>
+                <h2> &lt;, &gt; ==, !=, not</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="comparison-operatiors2">
+    <div>
+        <section>
+      <pre>
+      <code>1 &lt; 2</code>
+      </pre>
+      <p class="note"> 1 is less than 2 <strong>True</strong></p>
+      <pre>  <code>1 &gt; 2</code>
+     </pre>
+        <p class="note"> 1 is greater than 2 <strong>False</strong></p>
+     <pre><code>1 &lt;= 2</code></pre>
+        <p class="note">1 is less than or equal to 2 <strong>True</strong></p>
+     <pre><code>2 &gt;= 1</code></pre>    
+        <p class="note">2 is greater than or equal to 1 <strong>True</strong></p>     
+   </section>
+    </div>
+    </div>
+
+
+    <div class="slide" id="comparison-operatiors3">
+    <div>
+        <section>
+    Negation is achieved either by <mark>~</mark> or <mark>not</mark> keyword.
+      <pre>
+      <code>1 != 2</code>
+      </pre>
+      <p class="note"> 1 is not equal to 2 <strong>True</strong>. But instead, I want it to be False :)</p>
+     <pre>
+     <code><mark>~</mark> 1 != 2</code>
+     <code><mark>not</mark> 1 != 2</code>
+     </pre>
+    <p class="note"> Python developers use <mark>not</mark> which is more Pythonic!</p>
+   </section>
+    </div>
+    </div>
+
+    <div class="slide" id="comparison-operatiors4">
+    <div>
+        <section>
+    <mark>is</mark> <br />
+    <pre>
+        <code>object1 is object2</code>
+        <code>2-1 is                   # returns True</code>
+        <code>'twenty' is 'twenty'     # returns True??</code>
+        <code>['1'] is ['1']           # returns False</code>
+        <code>'twe' <mark>is in</mark> 'twenty'    # returns True</code>
+        <code>object1 is not object2</code>
+    </pre>
+    Looks innocent but it's actually advance. If time allowed I can explain it.
+    </div>
+    </div>
+        <div class="slide" id="assert-slide-come-back">
+        <div><section><header><h2>Use <mark>assert</mark>: re-visit</h2></header>
+        <pre><code>assert not not total == 101.25</code>
+            <code>assert total &lt;= 101.25</code></pre>
+        <p class="note">Now are you sure they will both return True?</p>
+        </div></div>
+
+    <div class="slide" id="goals2-again">
+    <div>
+        <section>
+           <header>
+                <h2>Goals: Re-visit again</h2>
+           </header>
+            <p> We want to write a program to calculate total value of coins and dollar bills we have.</p>
+            <ol>
+                <li><span style="color:grey">It knows about the value of each coin and each bill.</span></li>
+                <li><span style="color:grey">It needs to output the total.</span></li>
+                <li>It asks the human for the number of coins and bills.</li>
+                <li><span style="color:grey">It should be correct and reliable.</span></li>
+            </ol>
+        </section>
+    </div></div>
+
+<div class="slide shout" id="stop-1">
+    <div>
+        <section>
+            <header>
+                <h2> Q&A</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="input-cover">
+    <div>
+        <section>
+            <header>
+                <h2> input </h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="input1">
+    <div>
+        <section>
+            <header>
+                <h2> raw_input</h2>
+            </header>
+		<pre><code>usr_input = <mark>raw_input</mark>("Tells user what you want them to enter: ")</code></pre>
+		<p class="note"><mark>raw_input</mark> is a function that accepts user input from the keyboard. No evaluation. Keeps it as a string. It's safe</p>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="input2">
+    <div>
+        <section>
+            <header>
+                <h2> input:</h2>
+            </header>
+        <pre><code>input = <mark>raw_input</mark>("Tells user what you want them to enter: ")</code></pre>
+        <p class="note"><mark>input</mark> is a function that accepts user input from the keyboard but tries to convert the input into some data types. <br /> e.g. converts '1' to <mark>&lt;int&gt;</mark>. Security alarm!</p>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="goals3-again">
+    <div>
+        <section>
+           <header>
+                <h2>Goals: Re-visit again</h2>
+           </header>
+            <p> So can somebody get user input for all the coins and bills using what we've learned so far?</p>
+            <ol>
+                <li><span style="color:grey">It knows about the value of each coin and each bill.</span></li>
+                <li><span style="color:grey">It needs to output the total.</span></li>
+                <li>It asks the human for the number of coins and bills.</li>
+                <li><span style="color:grey">It should be correct and reliable.</span></li>
+            </ol>
+        </section>
+    </div></div>
+<div class="slide shout" id="dollars.py">
+    <div>
+        <section>
+            <header>
+                <h2> dollars.py</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="while">
+    <div>
+        <section>
+            <header>
+                <h2> while </h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="while-1">
+    <div>
+        <section>
+            <header>
+                <h2> while  </h2>
+            </header>
+		<p>This program only run once. What if the user is helping the whole class counting? You have multiple batches! </p>
+		<pre>
+		<code><mark>while</mark> &lt;expression&gt;<mark>:</mark></code>
+		<code>    do_something</code>
+		</pre>
+		<p class="note">This thing will run as long as <mark>expression</mark> is True.</p>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="while-2">
+    <div>
+        <section>
+            <header>
+                <h2> while: cont' </h2>
+            </header>
+        <pre>
+		<code>total = 0</code>
+        <code>while total &lt;=0:</code>
+        <code>    print 'dude. your total is zero. try again.'</code>
+		<code>    total = int(raw_input('Enter a total: '))</code>
+        </pre>
+        <p class="note">Someone try to walk through this code?</p>
+        </section>
+    </div>  
+    </div>
+
+<div class="slide" id="for-2">
+    <div>
+        <section>
+            <header>
+                <h2> for  </h2>
+            </header>
+        <pre>
+        <code><mark>for</mark> &lt;expression-a&gt;<mark>in</mark> &lt;expression-b&gt; <mark>:</mark></code>
+        <code>    do_something</code>
+        </pre>
+        <p class="note">This will <strong>iterate</strong> as long as we haven't exhausted all items in <mark>expression-b</mark></p>
+        
+		<pre>
+		<code>for num in [1,2,3,5]:</code>
+		<code>    print num</code>
+		</pre>
+		<p class="note"><mark>[1,2,3,5]</mark> is called a <mark>list</mark>. You can put anything you want in there.</p>
 		</section>
-	</div></div>
-	<div class="slide" id="TwoLinesHeader"><div>
-		<section>
-			<header>
-				<h2>Two rows.<br>Mighty heading</h2>
-			</header>
-			<p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash <em>your</em> browser.</p>
-		</section>
-	</div></div>
-	<div class="slide" id="UnorderedList"><div>
-		<section>
-			<header>
-				<h2>Unordered List</h2>
-			</header>
-			<ul>
-				<li>This tool is provided</li>
-				<li>Without warranty, guarantee</li>
-				<li>Or much in the way of explanation
-					<ol>
-						<li>Note that use of this tool</li>
-						<li>May or may not crash your browser</li>
-						<li>Lock up your machine</li>
-					</ol>
-				</li>
-				<li>Erase your hard drive.</li>
-			</ul>
-		</section>
-	</div></div>
-	<div class="slide" id="OrderedList"><div>
-		<section>
-			<header>
-				<h2>Ordered List</h2>
-			</header>
-			<ol>
-				<li>Note that use of this tool</li>
-				<li>Erase your hard drive.</li>
-				<li>May or may not crash your browser
-					<ul>
-						<li>This tool is provided</li>
-						<li>Or much in the way of explanation</li>
-						<li>Without warranty, guarantee</li>
-					</ul>
-				</li>
-				<li>Lock up your machine</li>
-			</ol>
-		</section>
-	</div></div>
-	<div class="slide" id="InTheMiddle"><div>
-		<section>
-			<header>
-				<h2>In the Middle</h2>
-			</header>
-			<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512" class="middle">
-				<path fill="#0174A7" d="m315 259l18-18 179 179v-36l-161-161 18-18 143 143v-36l-125-125 18-18 107 107v-225c0-28-23-51-51-51h-410c-28 0-51 23-51 51v410c0 28 23 51 51 51h191c17-25 14-59-8-81l-63-63-63-63c-55-55-55-145-0-199 55-55 144-55 199 0l9 7h109l-163 163v-107l-9-9c-25-25-66-25-91-0-25 25-25 66 0 91l63 63 63 63c37 37 49 89 37 135h136c28 0 51-23 51-51v-5l-197-197z"/>
-			</svg>
-		</section>
-	</div></div>
-	<div class="slide cover" id="FitToHeight"><div>
-		<section>
-			<header>
-				<h2>Fit to height</h2>
-			</header>
-			<img src="pictures/picture.jpg" alt="">
-		</section>
-	</div></div>
-	<div class="slide cover w" id="FitToWidth"><div>
-		<section>
-			<header>
-				<h2>Fit to width</h2>
-			</header>
-			<img src="pictures/picture.jpg" alt="">
-		</section>
-	</div></div>
-	<div class="slide" id="CodeSample"><div>
-		<section>
-			<header>
-				<h2>Code Sample</h2>
-			</header>
-			<pre>
-				<code>&lt;html lang="en-US"&gt;</code>
-				<code><mark>&lt;head&gt;</mark></code>
-				<code>    &lt;title&gt;Shower&lt;/title&gt;</code>
-				<code>    &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
-				<code>    &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
-				<code>    &lt;script src="j/jquery.js"&gt;&lt;/script&gt;</code>
-				<code><mark>&lt;/head&gt;</mark></code>
-			</pre>
-		</section>
-	</div></div>
-	<div class="slide" id="CodeNotes"><div>
-		<section>
-			<header>
-				<h2>Code Notes</h2>
-			</header>
-			<pre>
-				<code><mark>&lt;html</mark> lang="en-US"&gt;</code>
-			</pre>
-			<p class="note">May or may not crash your browser</p>
-			<pre>
-				<code><mark>&lt;meta</mark> charset="<mark>UTF-8</mark>"&gt;</code>
-			</pre>
-			<p class="note">Lock up your machine</p>
-		</section>
-	</div></div>
-	<div class="slide shout" id="Shout"><div>
-		<section>
-			<header>
-				<h2>Warning<br>Message</h2>
-			</header>
-		</section>
-	</div></div>
-	<div class="slide shout" id="Demo"><div>
-		<section>
-			<header>
-				<h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
-			</header>
-		</section>
-	</div></div>
-	<div class="slide" id="BlockQuote"><div>
-		<section>
-			<header>
-				<h2>Block Quote</h2>
-			</header>
-			<blockquote>
-				<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive.</p>
-			</blockquote>
-		</section>
-	</div></div>
-	<div class="slide" id="ThankYou"><div>
-		<section>
-			<header>
-				<h2>Shower Presentation Template</h2>
-			</header>
-			<p>Vadim Makeev, Opera Software</p>
-			<ul>
-				<li><a href="http://pepelsbey.net">pepelsbey.net</a></li>
-				<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
-				<li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
-			</ul>
-			<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
-		</section>
-	</div></div>
-	<!--
-		To hide progress bar from entire presentation
-		just remove “progress” element.
-		-->
-	<div class="progress"><div></div></div>
-	<script src="scripts/script.js"></script>
-	<!-- Copyright © 2010–2012 Vadim Makeev — pepelsbey.net -->
-	<!-- Photos by John Carey — fiftyfootshadows.net -->
+    </div>
+    </div>
+
+<div class="slide shout" id="dollars3.py">
+    <div>
+        <section>
+            <header>
+                <h2> <a href="http://pastebin.com/raw.php?i=0D32H94q">dollars3.py</a></h2>
+            </header>
+        </section>
+    </div>
+    </div>
+<div class="slide" id="dollars3.py-2">
+    <div>
+        <section>
+            <header>
+                <h2> dollar3.py</h2>
+            </header>
+		<pre><code>while True:</code></pre>
+		<p class="note">What's the problem?</p>
+        </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="dollars4.py">
+    <div>
+        <section>
+            <header>
+                <h2> <a href="http://pastebin.com/raw.php?i=pYcFY4KG">dollars4.py</a></h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+
+<div class="slide shout" id="stop-2">
+    <div>
+        <section>
+            <header>
+                <h2> Q&A</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+    <div class="progress"><div></div></div>
+    <script src="scripts/script.js"></script>
+    <!-- Template provided by Vadim Makeev — pepelsbey.net -->
+    <!-- Modified by John Yeukhon Wong  -->
 </body>
-</html>
+</html>
+
+
     <title>Shower Presentation Template</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=1274, user-scalable=no">
-    <link rel="stylesheet" href="themes/ribbon/styles/style.css">
+    <link reeseburgerl="stylesheet" href="themes/ribbon/styles/style.css">
     <link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
     <!--
         To apply styles to the certain slides
     </div>
     </div>
 
-    <div class="slide" id="2">
-    <div>
-        <section>
-            <header>
-                <h2> I iz a Python Chef? </h2>
-            </header>
-        </section>
-    </div>
-    </div>
 
 
     <div class="slide" id="3">
     </div>
     </div>
 
-    <div class="slide" id="topics">
-    <div>
-        <section>
-            <header>
-                <h2> Topics to cover </h2>
-            </header>
-        <ol>
-            <li>1</li>
-        </ol>
-        </section>
-    </div>
-    </div>
     <div class="slide" id="goals">
     <div>
         <section>
         <pre><code>assert not not total == 101.25</code>
             <code>assert total &lt;= 101.25</code></pre>
         <p class="note">Which one of them will fail the <mark>assert</mark> test?</p>
+		</div></div>
 
 <div class="slide shout" id="decision-cover">
     <div>
     <pre>
         <code>object1 is object2</code>
         <code>2-1 is                   # returns True</code>
-        <code>'twenty' is 'twenty'     # returns True</code>
+        <code>'twenty' is 'twenty'     # returns True??</code>
         <code>['1'] is ['1']           # returns False</code>
         <code>'twe' <mark>is in</mark> 'twenty'    # returns True</code>
         <code>object1 is not object2</code>
-        <code>'twk' is not in 'twenty'</code>
     </pre>
-    Will come back to some of this later today or during workshop.
+    Looks innocent but it's actually advance. If time allowed I can explain it.
+    </div>
+    </div>
+        <div class="slide" id="assert-slide-come-back">
+        <div><section><header><h2>Use <mark>assert</mark>: re-visit</h2></header>
+        <pre><code>assert not not total == 101.25</code>
+            <code>assert total &lt;= 101.25</code></pre>
+        <p class="note">Now are you sure they will both return True?</p>
+        </div></div>
+
+    <div class="slide" id="goals2-again">
+    <div>
+        <section>
+           <header>
+                <h2>Goals: Re-visit again</h2>
+           </header>
+            <p> We want to write a program to calculate total value of coins and dollar bills we have.</p>
+            <ol>
+                <li><span style="color:grey">It knows about the value of each coin and each bill.</span></li>
+                <li><span style="color:grey">It needs to output the total.</span></li>
+                <li>It asks the human for the number of coins and bills.</li>
+                <li><span style="color:grey">It should be correct and reliable.</span></li>
+            </ol>
+        </section>
+    </div></div>
+
+<div class="slide shout" id="stop-1">
+    <div>
+        <section>
+            <header>
+                <h2> Q&A</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="input-cover">
+    <div>
+        <section>
+            <header>
+                <h2> input </h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="input1">
+    <div>
+        <section>
+            <header>
+                <h2> raw_input</h2>
+            </header>
+		<pre><code>usr_input = <mark>raw_input</mark>("Tells user what you want them to enter: ")</code></pre>
+		<p class="note"><mark>raw_input</mark> is a function that accepts user input from the keyboard. No evaluation. Keeps it as a string. It's safe</p>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="input2">
+    <div>
+        <section>
+            <header>
+                <h2> input:</h2>
+            </header>
+        <pre><code>input = <mark>raw_input</mark>("Tells user what you want them to enter: ")</code></pre>
+        <p class="note"><mark>input</mark> is a function that accepts user input from the keyboard but tries to convert the input into some data types. <br /> e.g. converts '1' to <mark>&lt;int&gt;</mark>. Security alarm!</p>
+        </section>
+    </div>
+    </div>
+
+    <div class="slide" id="goals3-again">
+    <div>
+        <section>
+           <header>
+                <h2>Goals: Re-visit again</h2>
+           </header>
+            <p> So can somebody get user input for all the coins and bills using what we've learned so far?</p>
+            <ol>
+                <li><span style="color:grey">It knows about the value of each coin and each bill.</span></li>
+                <li><span style="color:grey">It needs to output the total.</span></li>
+                <li>It asks the human for the number of coins and bills.</li>
+                <li><span style="color:grey">It should be correct and reliable.</span></li>
+            </ol>
+        </section>
+    </div></div>
+<div class="slide shout" id="dollars.py">
+    <div>
+        <section>
+            <header>
+                <h2> dollars.py</h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="while">
+    <div>
+        <section>
+            <header>
+                <h2> while </h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="while-1">
+    <div>
+        <section>
+            <header>
+                <h2> while  </h2>
+            </header>
+		<p>This program only run once. What if the user is helping the whole class counting? You have multiple batches! </p>
+		<pre>
+		<code><mark>while</mark> &lt;expression&gt;<mark>:</mark></code>
+		<code>    do_something</code>
+		</pre>
+		<p class="note">This thing will run as long as <mark>expression</mark> is True.</p>
+        </section>
+    </div>
+    </div>
+
+<div class="slide" id="while-2">
+    <div>
+        <section>
+            <header>
+                <h2> while: cont' </h2>
+            </header>
+        <pre>
+		<code>total = 0</code>
+        <code>while total &lt;=0:</code>
+        <code>    print 'dude. your total is zero. try again.'</code>
+		<code>    total = int(raw_input('Enter a total: '))</code>
+        </pre>
+        <p class="note">Someone try to walk through this code?</p>
+        </section>
+    </div>  
+    </div>
+
+<div class="slide" id="for-2">
+    <div>
+        <section>
+            <header>
+                <h2> for  </h2>
+            </header>
+        <pre>
+        <code><mark>for</mark> &lt;expression-a&gt;<mark>in</mark> &lt;expression-b&gt; <mark>:</mark></code>
+        <code>    do_something</code>
+        </pre>
+        <p class="note">This will <strong>iterate</strong> as long as we haven't exhausted all items in <mark>expression-b</mark></p>
+        
+		<pre>
+		<code>for num in [1,2,3,5]:</code>
+		<code>    print num</code>
+		</pre>
+		<p class="note"><mark>[1,2,3,5]</mark> is called a <mark>list</mark>. You can put anything you want in there.</p>
+		</section>
+    </div>
+    </div>
+
+<div class="slide shout" id="dollars3.py">
+    <div>
+        <section>
+            <header>
+                <h2> <a href="http://pastebin.com/raw.php?i=0D32H94q">dollars3.py</a></h2>
+            </header>
+        </section>
+    </div>
+    </div>
+<div class="slide" id="dollars3.py-2">
+    <div>
+        <section>
+            <header>
+                <h2> dollar3.py</h2>
+            </header>
+		<pre><code>while True:</code></pre>
+		<p class="note">What's the problem?</p>
+        </section>
+    </div>
+    </div>
+
+<div class="slide shout" id="dollars4.py">
+    <div>
+        <section>
+            <header>
+                <h2> <a href="http://pastebin.com/raw.php?i=pYcFY4KG">dollars4.py</a></h2>
+            </header>
+        </section>
+    </div>
+    </div>
+
+
+<div class="slide shout" id="stop-2">
+    <div>
+        <section>
+            <header>
+                <h2> Q&A</h2>
+            </header>
+        </section>
     </div>
     </div>
 
     <div class="progress"><div></div></div>
     <script src="scripts/script.js"></script>
-    <!-- Copyright © 2010–2012 Vadim Makeev — pepelsbey.net -->
-    <!-- Photos by John Carey — fiftyfootshadows.net -->
+    <!-- Template provided by Vadim Makeev — pepelsbey.net -->
+    <!-- Modified by John Yeukhon Wong  -->
 </body>
 </html>