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.

WhatsApp-Image-2016-12-13-at-2.51.42-PM

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: http://bit.ly/2iNujas

Equipment needed:

-Laptop

-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: https://www.youtube.com/watch?v=xGMIttLXpo4)

Other sources that we used during our development phase:

https://developers.google.com/apps-script/articles/mail_merge

https://developers.google.com/apps-script/articles/sending_emails

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: https://www.youtube.com/watch?v=-Z_wU02z6ds&feature=youtu.be

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)) {
continue;
}
object[keys[j]] = cellData;
hasData = true;
}
if (hasData) {
objects.push(object);
}
}
return objects;
}
function normalizeHeaders(headers) {
var keys = [];
for (var i = 0; i < headers.length; ++i) {
var key = normalizeHeader(headers[i]);
if (key.length > 0) {
keys.push(key);
}
}
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;
continue;
}
if (!isAlnum(letter)) {
continue;
}
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’ ||
isDigit(char);
}

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

Teamwork:

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: https://www.youtube.com/watch?v=wpUolsy1ffg&feature=youtu.be

 

 

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.

FullSizeRender

 

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.

 

Intro To Programming – 17/8/2016

What is a program?

 

Today in class, we learnt what a program was; but in terms of real life situations. My partner (Mia) and I first had to guide each other to the closest door, but the other person would be blindfolded. We had to give instructions like how many steps to walk and how much to turn in which direction. First, we used oral instructions as we went, but after the first run through, we had to write down instructions without testing them first, and then read them out.

Once I tested my written instructions, I realized that programming is actually quite difficult. My instructional steps weren’t specific enough, which caused me to reconsider my steps as I ran the program.

One thing that I can improve on in the future is considering all the variables. If I don’t consider or control the variable, then I can make major miscalculations in the program, which can lead to it failing. I have learnt that when it comes to writing programs, everything needs to be put under consideration.

 

 

Something else that we did this lesson was teaching people how to tie shoe laces your way. Because the shoes I was wearing that day didn’t have any laces, I had to borrow one of Ms. Mok’s shoes in order to complete the activity. Her shoe had laces.

IMG_1651 (1)

 

The main task of the activity was to teach other people how you tie your shoes your way. Since there are many different ways to tie your shoes, people can teach each other their methods.

Once again, this activity kind of represented a program because like in the guiding a partner activity, I had to first write out instructions so that when someone else reads them without me there to guide them, they can understand what I’m trying to  say and successfully tie their shoes with my method.

This was also like a computer program because in a computer program, the computer only runs what you’ve inputted, and not anything else you say to supplement it afterwards.

Surprisingly, I found this extremely challenging because even for such a simple task such as tying shoes, its hard to convey and put it into words exactly how to do it. I am fluent with tying my shoes since I do it multiple times a day, but to me, its kind of like one of those concepts that is extremely easy, but yet difficult to explain.

From this activity, I learnt that being able to put your thoughts into words is very important. If you can’t translate what you want to do into instructions, then you can’t complete the task.