Putting Variables into Practice — Pair Coding Exercise

I worked together with Jinnie on this exercise, and when we first met, we started to talk about conceptual ideas about this project.

I shared initially how the image of the matrix scene - Blue Pill, Red Pill immediately came into mind when it comes to decision making

Jinnie added on to a movie she watched about ‘Turtles are Surprising Fast Swimmers’ and how the lead character had to make certain decisions to become a certified spy

So we went ahead with that concept of a spy mission - and wanted to display the scene like in the Matrix where it’s a digitized world. We first elaborated our plan onto the spreadsheet to map out the ideas.

After the ideation session, came the first huddle — how do we execute this? We then explored methods to code this sequence but the general pseudocode I had in mind was this:

• if person makes the “right” choice, screen will change to next sequence, else the screen will change to a fail screen

• a mouse pressed function must be used — to indicate action

We each tried on our own to see how we can develop the code but I was having difficulties because the above logic makes sense for the first screen, but it doesn’t work once it get to the second screen. Jinnie ultimately figured it out and I was discussing with her on the logic of it and here’s what I got:

• the 3 variables will be (1): The question screen they are on (2): the choice that the person makes (3): The current state, either dead or alive

• with that 3 variables, to nest the IF sequence together e.g. IF (question 1) {then display question 1, with 2 options); IF (choice 1 is made ) {question increase by 1, and choice resets}; else if (choice 2 is made) {change state};

We created the entire puzzle based on that logic without any visual so we can map out the interaction portion of the code first.

Once the interaction element of the code is completed, I assisted with the visual elements. There are 3 components that I came up with

(1): Icons of each question (2): Text and style of each screen (3): Hover options for each screen

Really putting together all that we’ve learned through ICM so far.

-to be continued-