Computer Programming as Baking Cookie

1. Computer Programming as Baking Cookie A “Recipe” for Computational Thinking in the context of ITEC1001 (and beyond) Informed and inspired by a STEM Grants Computational Thinking research conducted and published in Fall 2012 by Dr. Sebastien Siva, Dr. Stella Smith, and Dr. David Kerven By Jesse Huang (jhuang@ggc.edu)) Computer Programming as Baking Cookie

2. Programming as Baking - TOC • Objectives • Notes on Delivery • What’s Computational Thinking? • Why flowchart? Picture worth thousand worlds. • Programming as Baking – Evidences • Computational Thinking – an Example • Computational Thinking – the Evolution • Computational Thinking – Vocabulary • Computational Thinking – Reading • Computational Thinking – Flowcharts • Computational Thinking – Advanced Topic: Excel EMP() • Conclusion • Afterthought Computer Programming as Baking Cookie

3. Programming as Baking - Prolog Objectives: an integrated lecture/activity module designed – • To promoteComputational Thinkingin the context of ITEC by giving a series of focused hands-on demonstrations on computer programming(primary) and on digital media and web technology(secondary.) • To introducecomputer programming as a fun, useful, easy and deliciousundertaking in the hope of inspiring a deeper appreciation of and stronger passion toward information technologyin general and software engineeringin particular. Computer Programming as Baking Cookie

4. Programming as Baking - Prolog Objectives: an integrated lecture/activity module designed – • With adequate level of complexity (i.e. non-trivial; thus, a “challenge”), to show students “What’s possible” with ITEC, not to bog down with implementation details hoping to achieve programming proficiency in a few hours of lecture and activity. Computer Programming as Baking Cookie

5. Programming as Baking - Prolog Notes on delivery: • Divide the lesson into a series of 15-20-minute mini lectures/activities to be sprinkled throughout one semester, starting at about week-6, after MS Word module on myitlab, in tandem with TIA Chapter 4. Application Software coverage • Stress the fact from the outset that we’ll use the Number Conversion problem merely as a well-defined, non-trivial but manageable problem serving as a “vehicle” for illustrating the concept and learning the process of computational thinking and problem-solving . • Be sympathetic; deliver with humility and patience Computer Programming as Baking Cookie

6. Programming as Baking - Prolog Yummy Outcomes Guaranteed! Computer Programming as Baking Cookie

7. Programming as Baking - Prolog First, letme clarify what do I mean by saying “Computational Thinking” Computer Programming as Baking Cookie

8. Computational Thinking - Prolog Confucius(550 BC - 479 BC, revered by most Chinese people as the Master of All Teachers after him he was declared the "Extremely Sage Departed Teacher" (至聖先師). He is also known separately as the "Great Sage" (至聖), "First Teacher" (先師), and "Model Teacher for Ten Thousand Ages" (萬世師表). ) said (regarding his pupils): “Give them fish, and for 3 days they may survive. Give them fishing netsand teach them how to fish instead, they will live and thrive until the pond is dry.” Computer Programming as Baking Cookie

9. Computational Thinking - Prolog • Here at SST, through the teaching of Computational Thinking, we, too, strive NOT to just give our students “fishes” (i.e. solutions to particular problems), but to teach them how to fish (i.e. general, algorithmic approaches to problem solving); • to give them “recipes” andshow them how to make “cookie cutters” and “bake” cookies (i.e. computer programs, functions, procedures, etc.) Computer Programming as Baking Cookie

10. Computational Thinking - Prolog • In the context of ITEC1001, for example, we will not stop at merely teaching our students a particular product such as MS Office productivity software for solving certain classes of problems (e.g. writing resume, PPT presentation), • but we will go further, through the introduction of computational thinking and algorithmic methodology, to also teach them a general, systematic approach to problem-solving. Computer Programming as Baking Cookie

11. Computational Thinking - Prolog In short, we are aspired to teach students – • Not only How to Use software • e.g. MS Office productivity suites (“fishes”) in the context of general computing terminology • But also How to Make software • i.e. to apply computational thinking skill (“fishing nets”) to analyze problems and devise solutions; i.e. how to “think” like a programmer to overcome the “learning curve” when facing a given, unfamiliar software and/or technology Computer Programming as Baking Cookie

12. Computational Thinking - Prolog Loosely speaking, ComputationalThinkingmay be viewed as a thought process for analyzing problems, recognizing patterns, and devising algorithmic solutionsto the problems on hand. In other words, it is about the algorithmic way of thinking for analyzing problems and the systematic approach to the formation of solution. http://www.voki.com/pickup.php?scid=8660682&height=267&width=200 More on Algorithmic Problem Solving at: http://algorithmicproblemsolving.org/aps/ Computer Programming as Baking Cookie

13. Computational Thinking - Prolog In the context of ITEC, I view ComputationalThinking as: • Abstract thinking • Step-by-step procedural thinking • Divide-and-conquer thinking • Iterative thinking Computer Programming as Baking Cookie

14. Computational Thinking - Prolog Computational Thinking in K–12 Education, teacher resources second edition (as it appears on D2L Computational Thinking community) Operational Definition CT (Computational Thinking) is a problem-solving process that includes (but is not limited to) the following characteristics: ▪ Formulating problems in a way that enables us to use a computer and other tools to help solve them ▪ Logically organizing and analyzing data ▪ Representing data through abstractions such as models and simulations ▪ Automating solutions through algorithmic thinking (a series of ordered steps) ▪ Identifying, analyzing, and implementing possible solutions with the goal of achieving the most efficient and effective combination of steps and resources ▪ Generalizing and transferring this problem-solving process to a wide variety of problems These skills are supported and enhanced by a number of dispositions or attitudes that are essential dimensions of CT. These dispositions or attitudes include: ▪ Confidence in dealing with complexity ▪ Persistence in working with difficult problems ▪ Tolerance for ambiguity ▪ The ability to deal with open-ended problems ▪ The ability to communicate and work with others to achieve a common goal or solution Computer Programming as Baking Cookie

15. S4. Understanding Your Computer Computer System (Hierarchy) Overview • An example of abstract thinking: • Distilling the content of a one-semester course into a single flowchart

16. Computational Thinking - Prolog In the context of ITEC, I have come to the following humble conclusions: • ComputationalThinking is Computer Programming • The task of programming is very much like that of baking/cooking: take in a set of input (ingredients), follow the directions of recipes or “cookbooks” to process the ingredients, and produce output (e.g. cookies.) Computer Programming as Baking Cookie

17. Computational Thinking - Prolog • As demonstrated by researches conducted by Drs. Siva, Smith, et al., computational thinking is a way of thinking and approach to solution, and it is best manifested by flowcharts. • Thus, we will use flowchart and a real computer program, Number Converter, to illustrate the application of algorithmic computational thinking process to solve a real-life problem, • i.e. to convert numeral representation of a numeric value from one arbitrary base to another. Computer Programming as Baking Cookie

18. Computational Thinking - Prolog • Again, we want to stress the fact that we’ll use the Number Conversionproblem merely as a well-defined, non-trivial (reasonably complex), but manageable problem serving as a “vehicle” for illustrating the concept and learning the process of computational thinking and problem-solving • The lesson will be delivered as a series of 15-20-minute mini lectures/activities sprinkled throughout the semester • By the end of this lesson, students will not only learn or reinforce some valuable skills in problem-solving, but also get a glimpse of some fundamentals in computer programming Computer Programming as Baking Cookie

19. Introduction (reused Dr. SebastienSiva’s slide) • A flowchart is a type of diagram that represents an algorithm or process. • Shows the steps as boxes of various kinds, and their order with connecting arrows. • Flowcharts are used in analyzing, designing, documenting or managing a process or program in various fields.

20. Start Is compass score above 36? Yes A Sample Loop No MATH 0099 Most students will need a “C” or better to complete the GGC Freshman Math Sequence. MATH 1111 No Is grade “C” or better? (reused Dr. SebastienSiva’s slide) Yes Stop

21. (reused Dr. SebastienSiva’s slide) Blackjack Exercise The card game “Blackjack” requires the dealer to follow very specific rules for dealing cards to himself. He must deal one card face down, and then deal face up cards until his hand has a total score greater than 16. If his final score is greater than 21, then the dealer “busts”, else the dealer “stands”. Either way, his deal is complete. Create a flow chart on the right hand side depicting the “dealer” process described above. Note, for this exercise, you do not need to know how a total score is calculated, simply include a step called “calculate score”.

22. Start Deal Face Down Card Deal Face Up Card Blackjack SolutionRemove from Student Copy Calculate Score No Is score greater than 16 Yes Is score greater than 21 Yes No (reused Dr. SebastienSiva’s slide) BUST STAND Stop

23. In mathematics, a percentageis a number or ratio expressed as a fraction of 100. It is often denoted using the percent sign, "%”. Ex.: “6%” means “6 parts/boxes out of (over) 100 parts/boxes.” Computational Thinking - Prolog Why flowchart? A picture is worth thousand words! - By Hogben, Lancelot T., 1895 – Mathematics for the Million Computer Programming as Baking Cookie

24. Computational Thinking - Prolog Another examples: Square of Sum of two quantities Square of Difference of two quantities - By Hogben, Lancelot T., 1895 – Mathematics for the Million Computer Programming as Baking Cookie

25. Computational Thinking - Prolog • Lessons to be learned (Variable vs. Content; Abstractvs.Concrete): • Learn to think in “general/abstract” terms (from “concrete” to “abstract”): • Square of Sum of two quantities • Learn to translate “general/abstract” terms back into “concrete” representations (i.e. pictures, flowcharts) • An example from MyITlab Excel module - • “Using the formula rate = amount of increase/base, insert a formula in cell C7 that will calculate the percentage that the population has increased between 1970 and 1980.” Computer Programming as Baking Cookie

26. Programming as Baking - Evidences (Evidences: we call programming manuals as “cookbooks”…) Computer Programming as Baking Cookie

27. Programming as Baking - Evidences (How many bits makes one “bite” ? “Java”refers to both a type of coffee and a programming language!) Computer Programming as Baking Cookie

28. Programming as Baking - Evidences (Thus why we’ve produced…) Computer Programming as Baking Cookie

29. Programming as Baking - Evidences (But, if done right…) Computer Programming as Baking Cookie

30. Programming as Baking - Evidences (To demonstrate, here is a recipe …) Jelly Sandwich Cookies Recipe • Ingredients • 2 cups Basic Cookie Dough • Assorted jelliesorjams • Directions • On a lightly floured surface, roll outdough to 1/8-in. thickness. Cut with a 2-1/2-in. round cookie cutter. using a 1-1/2-in. cookie cutter of your choice, cut out the center of half of the cookies (discard centers). • Place whole cookies 2 in. apart on greased baking sheets. spread with 1 teaspoon jelly or jam; top with cutout cookies. Pinch edges with a fork to seal. Bake at 375° for 10-12 minutes or until edges are golden brown. Remove to wire racks to cool. • Yield • 24 yummy Jelly Sandwich Cookies Computer Programming as Baking Cookie

31. Programming as Baking - Evidences (… converted to an “app” in PHP …) Jelly Sandwich Cookies “App” • Ingredients (“Input”) • $Basic_Cookie_Dough= 2-cups ; • $jellies _or_jams= 1-p0rtion; • Directions (“Process”, “Function/Method”) • $Cookie_Sheet = Roll_out ( $Basic_Cookie_Dough , 1/8-in. thickness ); $Cookie_2-1/2 = CookieCutter.Cut ( 2-1/2-in, $Cookie_Sheet); $Cookie_1-1/2 = CokkieCutter.Cut( 1-1/2-in., $Cookie_2-1/2, “half” ”“at-enter”); Discard( $Cookie_1-1/2 ); • Place ( $Cookie_2-1/2, 2 in. apart , on greased baking sheets); Spread ( 1 teaspoon jelly or jam, on $Cookie_2-1/2; top (with cutout cookies); Pinch (edges with a fork to seal.)Bake (at 375° for 10-12 minutes or until edges are golden brown.)Remove (to wire racks to cool.) • Yield (“Output”; eventually goes to our tummy for “storage”) • 24 yummy Jelly Sandwich Cookies Computer Programming as Baking Cookie

32. Programming as Baking - Evidences All evidences point to one conclusion: Programming Is Baking/Cooking! Computer Programming as Baking Cookie

33. Programming as Baking - Evidences (Alright, maybe programming is not strictly making cookies but ...) • … making Cookie Cutters… • To automate, to enhance, to change the worldandmake it better, easier, faster (and make a lot of $money while doing it.) Computer Programming as Baking Cookie

34. Computational Thinking – an Example Number Converter A web-based “cookie cutter” (i.e. program) that is built upon three basic “ingredients”to demonstrate the essence & power of computer programming (i.e. computational thinking.) • Transforming • manual labor • Into • automation Computer Programming as Baking Cookie

35. Computational Thinking – an Example S.E.A.L. Challenge - Number Conversion • A guided learning expedition through a series of threeS.E.A.L. (Student Engagement toward Active Learning) Challenges to illustrate the process of , and develop the skill in, computational thinking to solve a non-trivial but well-defined and manageable problem: to convert numbers from an arbitrary base to another. Ex. decimal to binary/hexadecimal, and back to decimal; binary to Base-80 and back, etc. Computer Programming as Baking Cookie

36. Computational Thinking – the Evolution S.E.A.L. Challenges - Number Conversion Challenge 04: Manual Approach to Number Conversion - with pencil & paper • Numeral versus Number (Value) • Convert numeral representation between various bases using pencil and paper to analyze the problem, and to devise or learn a solution Challenge 05: Semi-computational Approach to Number Conversion - using Excel spreadsheet • Using Excel spreadsheet formulas to solve the problem • Expand the spreadsheet to support 32-bit number and extend the base to 80 using VLOOKUP() function Challenge 06: Computational Approach to Number Conversion - with computer programming • Using the Number Converter program (“cookie cutter”) • Study the functionality, source code, • Draw flowcharts (“reverse engineering”) on the three major functions: Main driver, ConverToDecimal(), ConvertTo() Computer Programming as Baking Cookie

37. Computational Thinking – the Evolution Challenge 04: Manual Approach to Number Conversion - with pencil & paper Work through the above activity/assignment to achieve the following learning objectives: • S.E.A.L. Challenge 04: Manual Approach to Number Conversion - with pencil & paper • Concepts & skills developed: Numeral versus Number(Value), Computational Thinking/Approach • Objectives: • To introduce, clarify, and/or illuminate the concept of Computational Thinking as an algorithmic approach or generalized procedure to problem-solving. • To develop, practice, and/or reinforce skills needed for further exploration of the discipline of Computational Thinking while setting the stage for developing a deeper appreciation for computer programming as an application of such thinking, which will be covered through a series of two separate but related exercises: 1.) Semi-Computational Approach to Number Conversion - using Excel spreadsheet and 2.) Computational Approach to Number Conversion - with computer programming. • To serve as a benchmark for contrasting the levels of effort needed between manual and computational approaches for problem-solving, thus highlight the benefit of efficiency and effectiveness gained by the latter. • By the conclusion of this assignment, students should demonstrate heightened appreciation regarding Computational Thinking as an iterative procedure that, like a good novel, has a begin, middle, and end, and by which certain process(es) can be repeatedagain and again until certain condition(s) is(are) met. It is this iterative nature of the procedure that lends itself nicely to be carried out by computer programming, thus lies in the heart of computational thinking. Computer Programming as Baking Cookie

38. Computational Thinking – the Evolution Challenge 04: Manual Approach to Number Conversion - with pencil & paper https://www.youtube.com/watch?v=qWxiXU02ZQM (Non-computational/Limitedapproach) https://www.youtube.com/watch?v=unYy2xRDm0o (Non-computational/Limitedapproach) https://www.youtube.com/watch?v=ZR0pC6_iW5Q (Computational/Algorithmic/Generalapproach) Computer Programming as Baking Cookie

39. Computational Thinking – the Evolution Challenge 05: Semi-computational Approach to Number Conversion - using Excel spreadsheet Computer Programming as Baking Cookie

40. Computational Thinking – the Evolution Challenge 06: Computational Approach to Number Conversion - with computer programming (“cookie cutter”) But, wait, wait, don’t tell me: what is a “cookie cutter”…? Computer Programming as Baking Cookie

41. Computational Thinking – Vocabulary • Simply put: • To learn computer programming (NOT software design/development/engineering) is to learn how to read, write, and think in a “foreign language”; it’s all about “vocabulary & grammar ” • (Ex. An esoteric programming languageINTERCAL) • It takes only patience and dedication to learn “vocabulary & grammar” in a foreign language. • Make clear about this point can encourage students to ask questions (there will be no “stupid” question) to promote true learning Computer Programming as Baking Cookie

42. Computational Thinking – Vocabulary Ingredients #1:Data & Data Structure • Primitive Data – • Variables that hold a single piece of data, such as… • A number, e.g. $course_number= 1001; $credit_hour = 4; • A character, e.g. $initial = ‘C’; $grade = ‘A’; • A string, e.g. $cource_subject = “ITEC”; • Record (“Class”) – • A group of variables containing Primitive Data to form a logical entity, such as… • $course = {$course_subject, $course_number, $credit_hour, …}; • $contact_info= {$name, $address, $phone, $email, …); • Array (“Table”) – • A collection of Primitive Data or Record, such as… • $base_10_numeral = {‘0’, ‘1’, ‘2’, ‘3’, …, ‘9’}; • $base_2_numeral = {‘0’, ‘1’}; • $course_catalog = {$course, $course,…,$course}; • $yellow_page= {$contact_info, $contact_info, …, $contact_info}; Computer Programming as Baking Cookie

43. Computational Thinking – Vocabulary Google image “Array of Dishes”: $numeral_map= array( '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '!', '@', '#', '^', '&', '*', '(', ')', '~', '[', ']', '{', '}', '|', '<', '>', '/', '?' ); an important data structure: Array $numeral_maparraylooks like this: To access an array element: $x = $numeral_map[0]; $y = $numeral_map[10]; etc. Computer Programming as Baking Cookie

44. Computational Thinking – Vocabulary Ingredients #2:Basic Operators Computer Programming as Baking Cookie

45. Computational Thinking – Vocabulary Ingredients #2:Basic Operators (continued) Computer Programming as Baking Cookie

46. Computational Thinking – Vocabulary • Sequence • Execute one statement after another in sequence • Selection (Decision) – • If condition true • Do this • Else • Do that • Iteration (Loop) – • While condition true • Repeat statement(s) • 4.Function Call – • “Goto” a group of statement(s) and come back with a value Ingredients #3:Control Flow http://docs.oracle.com/cd/A87860_01/doc/appdev.817/a77069/03_struc.htm http://suite101.com/a/control-structures-in-programming-a96234 http://jfkcomputingrevision.wikispaces.com/basic+programming+constructs http://answers.yahoo.com/question/index?qid=20070105203239AAROqkv Computer Programming as Baking Cookie

47. Computational Thinking – Vocabulary Ingredients #3:Control Flow (continued) 1. Sequence : … $convert = isset($_POST['convert']); $errors = array(); $to_basex_steps = array(); $to_decimal_steps = array(); … $from_base = $_POST['from_base']; $from_number = $_POST['from_number']; $to_base = $_POST['to_base']; $to_number = ""; … Computer Programming as Baking Cookie

48. Computational Thinking – Vocabulary Ingredients #3:Control Flow (continued) 2. Selection (Decision) : … if ( empty($from_base) ) { $errors[] = "Please enter a From Base (2-80), then press 'Convert' button to convert"; } else { if ( ($from_base > count($numeral_map)) || ($from_base < 2) ) { $errors[] = "The 'From Bases' must be in the range of 2-80"; } } … Computer Programming as Baking Cookie

49. Computational Thinking – Vocabulary Ingredients #3:Control Flow (continued) 3. Iteration (Loop) : functionConvertTo($from_base, $from_number, $to_base, &$to_number, &$to_basex_steps) { … $to_numeral_arr = array(); $remainder = 0; $quotient = 0; $decimal_value = ConvertToDecimalValue( $from_base, $from_number, $to_decimal_steps); … $quotient = $decimal_value; while ( $quotient > 0 ) { $remainder = (int)($quotient % $to_base); $quotient = (int)($quotient / $to_base); $numeral = $numeral_map[$remainder]; $to_numeral_arr[] = $numeral ; } $to_number = implode("",array_reverse($to_numeral_arr)); return $decimal_value; } Computer Programming as Baking Cookie

50. Computational Thinking – Vocabulary Ingredients #3:Control Flow (continued) 4.Function Call (“GoTo”) : … Validate( $from_base, $from_number, $to_base ); if (empty($errors)) { $to_number= ConvertTo( $from_base, $from_number, $to_base, $to_basex_steps ); } … • For a function to work, it must first be “defined”, and then be “called” to execute. It usually “returns” values. Computer Programming as Baking Cookie