Design Thinking Programming Challenge Blog Post (S)

Step 1: Ideate and Empathize

Before we could start making anything, we had to ideate and come up with ideas. Olivia, Weilyn, and I did this by trying to empathize with the students and teachers of the HKIS community and seeing if there were any problems that we could help solve through programming. We compiled them into one big mind map.


Step 2: Questionnaire

Next, we wanted to test our ideas to see if they were actually real problems that people could relate to. We did this by creating a questionnaire and asking people all around the school to give their input. The two main ideas that we narrowed it down to was having an reminder app to remind people to drink water and to create a mile tracker. Here were some of the results:

Screen Shot 2017-01-19 at 9.57.30 PM

Screen Shot 2017-01-19 at 9.57.25 PM

Screen Shot 2017-01-19 at 9.57.47 PM

Screen Shot 2017-01-19 at 9.57.56 PM

Step 3: Investigate

After we received student input on our problems, we decided that it would also be a good idea if we received input from some of the teachers as well (specifically for the mile tracker issue). For the water dehydration issue, we discussed it among us and decided that it wasn’t a problem that a large crowd of students were dealing with. Once we talked to the MS PE teachers, we realized that this wasn’t really an issue to them since they already had their own tracking system that they were happy with. However, they did express their concerns in that they wanted to have either a new click-based grading system which is more convenient to use, or a system that would help track any make up sessions students would have to complete. After discussing it, we decided that we should try and solve the make up session problem as Schoology, a platform that fits their needs, already exists and is being used by other HKIS teachers.

Here is our one-sentence summary statement of our project: We want to create a program that automatically sends reminders to students in order to help MS PE teachers keep track of make ups that need to be completed. 

Step 4: Planning/Pre-code stage

Now that we had a solid problem that we were gonna work to tackle, we needed to start coding as soon as possible so that we could finish the project in time. However, I2P has taught us that psuedo code is actually a very important development stage for programmers. Instead of jumping straight into coding, we decided to plan out what we were going to do by writing some psuedo code. Here is the psuedo code we wrote:

Equipment needed:


-Google spreadsheets

Here are also some of the physical planning documents and flowcharts we created:

original project idea (1)

final project idea (1)


Step 5: Research

After Mr. Lin’s demonstration on how to send emails through Google Sheets using Google Script, our group thought that it would be best if we used this method as well. The only problem that we faced by using this tactic is that Google Scripts uses Javascript, while we have spent the whole semester learning only Python. However, this obstacle didn’t phase us. We used online resources such as Google Script tutorial articles and YouTube videos to figure out how to get the code to work (here is one of the videos we used, but didn’t end up incorporating into our project:

Other sources that we used during our development phase:

Step 6: CODING

Now that we have got all of the preparation work done, it is finally time to actually start coding. We took all of the code and knowledge gathered from our research and put it together to create a working program. Here is a video explaining (voice over by me) explaining how our code works:

Here is the actual code:

function sendEmails() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheets()[0];
var dataRange = dataSheet.getRange(2, 1, dataSheet.getMaxRows() – 1, 11);

var templateSheet = ss.getSheets()[1];
var emailTemplate = templateSheet.getRange(“A1”).getValue();

// Create one JavaScript object per row of data.
objects = getRowsData(dataSheet, dataRange);

// For every row object, create a personalized email from a template and send
// it to the appropriate person.
for (var i = 0; i < objects.length; ++i) {
// Get a row object
var rowData = objects[i];

// Generate a personalized email.
// Given a template string, replace markers (for instance ${“First Name”}) with
// the corresponding value in a row object (for instance rowData.firstName).
var emailText = fillInTemplateFromObject(emailTemplate, rowData);
var emailSubject = “MS PE Makeup Reminder”;
MailApp.sendEmail(rowData.emailAddress, rowData.emailAddress, emailSubject, emailText);
// Replaces markers in a template string with values define in a JavaScript data object.
// Arguments:
// – template: string containing markers, for instance ${“Column name”}
// – data: JavaScript object with values to that will replace markers. For instance
// data.columnName will replace marker ${“Column name”}
// Returns a string without markers. If no data is found to replace a marker, it is
// simply removed.
function fillInTemplateFromObject(template, data) {
var email = template;
// Search for all the variables to be replaced, for instance ${“Column name”}
var templateVars = template.match(/\$\{\”[^\”]+\”\}/g);

// Replace variables from the template with the actual values from the data object.
// If no value is available, replace with the empty string.
for (var i = 0; i < templateVars.length; ++i) {
// normalizeHeader ignores ${“} so we can call it directly here.
var variableData = data[normalizeHeader(templateVars[i])];
email = email.replace(templateVars[i], variableData || “”);

return email;



function getRowsData(sheet, range, columnHeadersRowIndex) {
columnHeadersRowIndex = columnHeadersRowIndex || range.getRowIndex() – 1;
var numColumns = range.getEndColumn() – range.getColumn() + 1;
var headersRange = sheet.getRange(columnHeadersRowIndex, range.getColumn(), 1, numColumns);
var headers = headersRange.getValues()[0];
return getObjects(range.getValues(), normalizeHeaders(headers));

// For every row of data in data, generates an object that contains the data. Names of
// object fields are defined in keys.

function getObjects(data, keys) {
var objects = [];
for (var i = 0; i < data.length; ++i) {
var object = {};
var hasData = false;
for (var j = 0; j < data[i].length; ++j) {
var cellData = data[i][j];
if (isCellEmpty(cellData)) {
object[keys[j]] = cellData;
hasData = true;
if (hasData) {
return objects;
function normalizeHeaders(headers) {
var keys = [];
for (var i = 0; i < headers.length; ++i) {
var key = normalizeHeader(headers[i]);
if (key.length > 0) {
return keys;

// Normalizes a string, by removing all alphanumeric characters and using mixed case
// to separate words. The output will always start with a lower case letter.

function normalizeHeader(header) {
var key = “”;
var upperCase = false;
for (var i = 0; i < header.length; ++i) {
var letter = header[i];
if (letter == ” ” && key.length > 0) {
upperCase = true;
if (!isAlnum(letter)) {
if (key.length == 0 && isDigit(letter)) {
continue; // first character must be a letter
if (upperCase) {
upperCase = false;
key += letter.toUpperCase();
} else {
key += letter.toLowerCase();
return key;
function isCellEmpty(cellData) {
return typeof(cellData) == “string” && cellData == “”;
function isAlnum(char) {
return char >= ‘A’ && char <= ‘Z’ ||
char >= ‘a’ && char <= ‘z’ ||

function isDigit(char) {
return char >= ‘0’ && char <= ‘9’;


Testing Document:

Throughout the coding process, we did come across many parts of the script that we needed to test to see if it works. I2P has taught us that in order to keep track of what has been tested and what needs to be tested, we created a testing document to log what we tested and when.

Screen Shot 2017-01-19 at 10.33.13 PM


Although this project was supposed to be a team effort, I still believe that there were some people who pulled more weight than others. For this project, we were all supposed to work together and contribute equally to the final project. Splitting the work evenly into three parts proved to be a difficult task especially when it came to a brand new coding language. Because this was a new language that we had to learn, Weilyn and I both had to put in some extra effort to watch videos and read articles on how to learn Javascript. Even though we both had to put in extra effort, I believe that it was needed since without the effort, we wouldn’t have been able to finish the project on time.

Even though Weilyn and I did put in a lot of effort into our project, I do believe that there could’ve been more that Olivia could’ve done. Despite the fact that Olivia did contribute towards the project such as the infographic, I don’t believe that she directly contributed to the development and production of the code itself. I feel like the project would’ve run more smoothly if we worked better as a team with all 3 of us working together. I think what ended up being the problem was that Weilyn and I went ahead with all the research without asking Olivia to research as well and that Olivia wasn’t especially proactive in contributing towards the code. I believe that there is more collaborative effort we could’ve put in, which is something all of us need to improve on n the future.

Final Thoughts:

Overall, I really enjoyed this semester course. Through this semester, I was able to go from having no knowledge in programming at all to having a substantial amount knowledge that I could use and apply to solving certain problems. One of the main takeaways I had from this course was improving my design thinking skills. I believe that spending the first few months working on design thinking was important because it taught me a skill that helped us program and we could use outside of this class.

I really enjoyed this class because it helped me improve my problem solving skills as well as teach me how to code a computer program.


Summary Video:

Instead of reading all of this information, we have also produced a video that also explains the process that we had to go through in order to achieve the product of this project:



Makey Makey Challenge

For our partner Makey Makey projects, Olivia and I decided to create a Whack-A-Mole game using scratch and a Makey Makey console.

For this project, I decided to use Scratch as my main coding platform. First, we started to construct the graphics as well as find the sprite for the game. In order to do this, we had to design the backdrop for the mole game and find the images of the moles. Once we did that, we arranged them all on scratch. In order to get the mallet graphic to work, we had to find two sprites-one of a regular mallet and one of the mallet when it was being pounded. In order to get them to change over, we had to set the code to change between the different costumes.

Screen Shot 2016-12-12 at 8.36.29 PM

Next, we began actually coding the game itself. This was the difficult part of the project that Olivia and I were unfortunately unable to complete within the three classes.

Screen Shot 2016-12-12 at 8.38.26 PM


Since this was basically my first time using scratch to code something, I wasn’t very fluent with how to use it. However, by the end of the three lessons, Olivia and I managed to get the moles to pop out randomly from their holes and the timer to work. However, we weren’t able to get the mallet nor the score counter to work. I think that If we were given more time, we would’ve been able to finish this project. Unfortunately, because of this, we were never able to test it using a makey makey and a real life mallet.

Something both Olivia and I could both improve on could be possibly time management and prioritization. During the project, we actually decided to make the mole holes that we ended up not using. Because of this, it cut down on the amount of time we were able to spend actually coding the game. Furthermore, I believe that we could’ve both collaborated more. To be honest, I felt during some points that I was doing the work and Olivia was kinda just there. Nonetheless, we were still able to work together to try and get as much done as possible.



Makey Makey Balance Board Challenge

For this Makey Makey project, my partner Carlos and I had to use a Makey Makey and some code on Scratch to time how long a user could stand on that balance board. Before we started to connect wires to the Makey Makey, we had to make the code on Scratch. This process actually proved to be slightly difficult since I had virtually no previous experience with Scratch, so it did take me a bit of time to create my code:

Screen Shot 2016-12-04 at 10.56.32 AM


^This is the working code that we came up with. The function of this code is to time how long the user can balance on the balancing board without either side touching the ground. When the space key on the Makey Makey was triggered, the timer would start. When the up or down key was pressed, then the timer would stop. The up and down on the Makey Makey was hooked onto either sides of the balance board. On either side of the balance board as well as the edges of the balance board, there was tin foil on the ground so we could conduct electricity. When the timer stopped, it would remain on the screen until the user manually used the laptop to press the green flag button; which would automatically reset the timer to 0.

Even though our code and building of the Makey Makey was successful, there were still improvements that could’ve been made. For example, instead of having the ‘space’ key trigger the timer to start, we could’ve instead used the release of either the up or down key to activate the timer. I realized this after we finished the code that we can’t really ‘press’ the space key.

Lastly, we didn’t really get to test our code and Makey Makeys during the class period. Since there were other groups using the large balance board, Carlos and I had to construct a mini balance board out of a wooden plank and a bottle. We spent some time constructing this mini balance board, which practically left us with no time to actually test our creation. Carlos and I look forward to doing that next period (hopefully).

Programming Summative Quiz


My quiz is basically about random famous people and Sheel. In order to code the quiz, I had to use many of the syntaxes that I have learnt in the months so far.


Firstly, here is the link to the YouTube video which displays my final code for this quiz and the quiz being played. This video has no voice:

After reading the post criteria again, I decided it was best to also include a video with audio:

After reading the post criteria YET AGAIN, I decided it was best to ALSO include a Google Doc that houses only the code I had written. This way, it is easier to read rather than on the video:


The purpose of this assignment was to be able to use all of the Python coding knowledge we have acquired so far to code our very own quiz for users to take. Before I actually started to code, I had to create a flowchart/mindmap to plan out what the structure of the code would look like. I did this on a sheet of paper and wrote it out in the pseudo code format. Later when I was actually coding the quiz on PyCharm, I actually found this flowchart to be very useful since it gave me a pretty thorough guideline which helped me to know what to code. However, I did decide not to include some elements from the pseudo code (such as the endgame response based on the score).   IMG_2269

Code Explanation:

In the actual code itself, the main type of syntax that I used was ‘If’ and ‘Else’. I found this as the best type of syntax to use since in the quiz format, there is only one correct answer out of a, b, c, or d. Instead of writing separate responses for each of the 4 possible inputs, I decided that it was best to write a response for the correct answer and one for everything (and anything) else the user may have selected as an answer. Screen Shot 2016-11-27 at 6.06.17 PM     Another element that I implemented throughout the code for my quiz was a score counter. My score counter was a variable which basically counts the number of questions that a user got correct. It did not subtract points if a user got a question incorrect. Once the user had completed the quiz, the computer would then tell the user their score. In order for the score counter to work, I needed to create it as a variable. This was actually the very first thing I did when coding this quiz. I defined the score counter as a variable called scorecounter and set it as zero. For every time a user got a question correct, the computer would print the ‘congratulations you got it right!’ response as well as add 1 point to the score counter variable. Screen Shot 2016-11-27 at 6.15.23 PM   Screen Shot 2016-11-27 at 6.15.28 PM   At the end of the game, the code prints out the total number of questions answered correctly by simply print(scorecounter). This way, the user can see how many questions they answered correctly. Screen Shot 2016-11-27 at 6.17.59 PM   Apart from that, ‘If’ statements, ‘Else’ statements, and the score counters were basically the only special syntaxes that I included. I also used a different method to print on different lines which I will explain later on (since I got it from an internet source). In order to make sure that all of my code was working and to log all the modifications I made, I used a testing document. This testing document is where I logged all the elements that I had tested, what the element does, what modifications I made (if any), when it was tested, and by whom. This way, I could look at the spreadsheet at a glance to make sure everything worked instead of playing the quiz and reviewing the code line by line.


Overall, I think that my quiz was very successful. I was able to get the game completed, tested, and modified within the 3-4 class sessions given.

Day 1:

On this day, we were all told to simply create a pseudo code flow chart in order to brainstorm our quiz before we actually started to code it out on PyCharm. I spent this class period finishing my flow chart (image inserted above). I had some time after I completed my flowchart (since I finished early) which I used to actually start coding on PyCharm. Since there actually wasn’t that much time (maybe 10-15 mins), this is all that I had completed by the end of the class: Screen Shot 2016-11-27 at 6.32.56 PM

Day 2:

This is the class period where I got the most work done. I basically spent this whole period writing up the code for all 16 of the questions. By the end of this class, I had actually completed the first draft of my quiz. Since it is so long, I’m not going to insert a screenshot. The videos linked above basically show the quantity of code I completed during this lesson.

Day 3:

This is the class where the testing document was introduced to us. Prior to working on the testing document, I made some minor tweaks here and there in the code to make it run more efficiently. Afterwards, I created and started filling out the testing document (linked above)

Website References:

During this project, there were some obstacles that I had to overcome. The actual only issue that I ran into that I couldn’t solve on my own without the internet was learning how to print on different lines. Despite the fact that Ms. Mok had showed us how to do this previously, I had forgotten how to and therefor had to use the internet to search up how. In the end, I found 3 website links (same website, but 3 different forums). I tried all of the methods, but only found the last link to be useful. I used the syntax listed in the last forum in my code:   In the end, I used the information that I gathered on the web to actually print on separate lines. Here is the syntax I used and the result it yielded: Screen Shot 2016-11-27 at 6.46.10 PM   Screen Shot 2016-11-27 at 6.47.29 PM


To conclude, I found this to be a rather interesting summative task. Through this project, I was able to bring together most of what I have learnt so far and use it to create a quiz on a topic that I found interesting. This project also helped me to realize what real life coders use their skills to produce (such as a quiz!)

Adventure Game Blog Post

Link to pseudo code:

Video of game working in many different adventure scenarios: j

Throughout the making of this game, there were many challenges that Sheel and I faced. One of the main challenges was having to code many scenarios and outcomes for the game since we decided to make a lot of options. Because of this, Sheel and I took a long time in creating a game. The other issue that we faced was the storyline of the game itself. Halfway through the construction, Sheel and I realized that our design process wasn’t thought through enough. Since it was one of the last lessons coding, we decided to keep it as it was.

Screen Shot 2016-11-16 at 9.32.41 PM

Screen Shot 2016-11-16 at 9.32.52 PMScreen Shot 2016-11-16 at 9.32.56 PM

Python Lesson 5 Reflections

Today, I learnt about a new coding concept called a function. Functions are very useful coding tools. They can easily perform logical tasks that need to be repeated. This code helps to repeat the logic over and over again so that it can be repeated an infinite number of times without having to type out the code over and over again. For example, you can simply give the function a name and use that name later on in the code in order to save time by not typing all the code out. This is a much easier process as a name is a lot easier to code out than the entire code again.

This is achieved by storing the logic/code into the memory itself, so it can be easily accessed again from the memory when the programmer calls on the shortened function later on in the program. Functions must begin with a letter and contain no spaces.

After familiarising ourselves with functions by trying out several examples on PyCharm, we started a new project. This project was called the ‘Chocolate Machine Challenge’. In this challenge, we have to use functions to determine how much change we need to give back when an amount of money is inputted by the user, and how we would have to use different functions in different scenarios where different bill types are used. During this class, I was only able to start off the easier part of the coding process which was to calculate the amount of change given since I had some difficulty writing out the code for different bill types. I will continue to try and do this next class.

Screen Shot 2016-11-03 at 5.48.41 PM

Python Lesson 4

Today, we learnt about If-Else statements. An If-Else statement is where if the input satisfies the code, then a certain function would take place. If the input does not satisfy, then the code under ‘else’ would run. This ‘else’ code would only run if the requirements aren’t met. This loop can be useful as it gives feedback to the user if the conditions haven’t been met.

Something else that we learnt about today was the ‘Elif’ function. Like If-Else statements, the ‘Elif’ function is also very useful. An ‘Elif statement allows the code to check the validity of multiple variables at the same time. This is extremely useful since instead of of having to write out many lines of ‘if’ statement loops, we can shorten and condense that code to one line. This way, we can save time by not having to write as many lines of code but still be able to have the same outcome in the end.

One of the projects that we did in class today was a ‘vowel’ counter. This series of code was written to count the value of a word based on how many vowels there were in that word.



This series of code uses the ‘elif’ function to define which letters are vowels and how many points they’re worth. Once the user inputs their name or their word of choice, the code then counts the number of vowels in that words and then assigns a score based on what each vowel is worth.

Moving on, we also started writing the pseudo code for a guess the word game. This game uses all of the functions that we have learnt today so far.

-insert images when olivia sends them…-

So far, we have decided to use food options. Since my laptop was under repair and I couldn’t use PyCharm, I had to write out the code on a separate document. Here’s what it looks like so far:


import random

vChoices = (“fries”, “chips”, “cookie”, “burger”, “sushi”, “apple”)

vWord = (random.choice(vChoices))

vName=input(“whats yo name?”)


In order to make sure that theres a limit on what words the computer can choose to use, we decided to limit the computer so it would be a lot easier for the user to guess within 6 words rather than an infinite number.


Today, I also learnt when it is appropriate to use whichever type of loop. The ‘while’ loop is a good option to use when coding if there are multiple situations since it won’t pass unless a certain condition is met. This way, the loop is solid and closed, leaving no room for error. Meanwhile, a ‘for’ loop also has its own benefits. This loop is good to use when there is a known number of times something will repeat. Even though there will be a lot of inputs, the code will only pass after the correct input is inserted.

Python Lesson 3 Reflection

Screen Shot 2016-10-13 at 10.45.35 AM


Since I read the wrong criteria for the blog post in the beginning (I didn’t open up the assignment and see what P8 blog posts had to include), I ended up writing the most of the code for the game at home (shown above). Anyways, I’ll probably try write to meet both requirements in this post. However, my game isn’t completed yet, so I might not be able to address all the criteria. 


So the main learning objective of this class was to identify and understand how to use pseudo code. So firstly, what is pseudo code? Pseudo code is the words and sentences in ENGLISH that help to tell the user what the computer is doing. Lines of pseudo code usually appear after a ‘#’, since the program doesn’t recognize anything after a hashtag. Since the computer doesn’t run this code, it is instead used for the user to read, thus requiring it to be in proper English.

Today, I also learnt more about flowcharts and why they’re important. Flowcharts help the programmer to visualize the steps to achieve something. In other words, a flowchart acts as the planning or ‘idea development’ stage of the design process. Sheel and I created a flowchart for feeding a pet. The flowchart is attached below:


-insert image here once I have access to my phone again-


So the feed your pet algorithm was a scenario where we had to apply our knowledge on pseudo code and use of flowcharts to solve the problem on when to feed a pet. My partner Sheel and I decided to choose Shiv (Sheel’s twin brother) as our pet so we based our process, code, and flowchart off of feeding Shiv. After creating the flowchart (above), we decided to write some pseudo code on PyCharm which basically takes the flowchart and changes it into sentences on a computer. Our pseudo code is shown below:


-insert pseudo code once sheel decides to send it to me from his laptop…-


Lastly, we started to work on our guess the number game in class today. The objective of this project is to program a game where the user is trying to guess the computer’s number based off of clues of whether or not the number is higher or lower than the user’s guess. In class, we established how to use a random number generator. This random number generator paired with the range will help the computer to pick a number between two integers which the user will then try to guess. The code I wrote at home is the image on the top of this post.

At home, I was able to finish up the basic structure of the game. I was able to use a random number generator to generate a number between 1-50 (my range). I was also able to incorporate the input function by allowing the user to tell the computer their name. I was also able to write some code that told the user if their guess was too high, too low, or if they guessed correctly.

However, there were some things that I wasn’t able to complete at home. For example, I have been unable to put a limit on the number of guesses the user has, so I’ve basically just copy and pasted the code over and over again to give the user an infinite number of guesses. This is something I need to work on next lesson so that I can further improve my game.


Python Lesson 2 Reflection

Screen Shot 2016-10-07 at 8.51.46 PM  In python, there are both integers and floats. Integers are the same thing in python—a whole number. A float however, has its own meaning in python. A float in python is a function that helps to keep the number in a decimal format instead of having it as a whole number.

I also learnt about slicing today. In order for slicing as a function to work in python, you need to have a string. What slicing does is it helps to divide up the string into smaller fragments. In class today, we took the month name ‘October’ as our ‘string’. We chose the slicing ratio, to see which letters we wanted to show up when we ran the code. Once we inputted our slicing settings, the code would then pick out the letters that you want. In order to choose the length of your slice, you will need to change the ratio so the code can pick out the correct amount of letters in that string.

One other important thing I learnt about today is a loop. A loop is some code that tells the program what to do until it meets certain conditions. When you visualize it in real life, it becomes more like a flowchart. The program can only advance when certain conditions are met. If those conditions are not met, then the program would have to go back to the previous step and keep running the code until those conditions are met.

To conclude, today’s session was extremely interesting, as I have learnt about a lot of skills and functions that I can apply to other situations such as games, conversations, and much more!

Python Lesson 1, Reflection

Screen Shot 2016-10-04 at 8.04.58 PMIn this class, I learnt a lot about how to code in Python. Since I have never coded in Python before, pretty much everything that was taught this class was brand new to me.

The first function that I learnt was the ‘print’ function. When you play some code that uses ‘print’ with text in quotation marks, the output is exactly what you put inside the quotation marks. Apart from printing text word for word, this function can also solve some mathematical equations. If you don’t add quotation marks in put in a mathematical expression, the code will automatically calculate it for you in the output.

Apart from the print function, I also learnt how to define and use a variable in code. When you have an output that depends on what the user types in, you will need to use a variable. It is easier to name the variable accordingly, so that you can easily identify what the variable represents when you go back and look over your code. Once you have defined your variable, you have to use the same name for all of your lines so that the system recognizes them as the same.

So, how are users supposed to communicate through the code in order to define the variable. For this, you will need to use an input function. The input function allows the user to type in a response to the question asked by the code. This way, it can be more interactive and fitting to the user’s needs; such as asking them which times table they would like to learn.

Lastly, I also learnt about strings and integers and what sets them apart in Python. Integers are whole, negative or positive numbers. Strings, on the other hand, are bits of text that the system recognizes to be printed. In order to tell the system that, you insert quotation marks before you print.