blog

icm midterm: sex ed trivia game

this week's midterm was hopefully the first step to a much larger project.  i'm hoping to expand on this for my final.

i've always been extremely passionate about sex ed and reproductive health -- i find that it's an area that, if they're opposed to educating teens about it, people get extremely defensive about and throw to the wolves without really understanding how important it actually is.  but that's a different story for a different day.

this semester, i'm taking some sex ed seminars at planned parenthood, which will help potential educators like myself figure out how to talk about sex, birth control, and family planning in an engaging way that will actually get through to our target audience.  and so for my icm project, i decided to embark on a quest to make a fun, interactive sex ed trivia game, with the hopes of potentially working with an organization to maybe implement it on a website or as part of an educational package.

the game starts out with an opening screen, as seen above, which asks the user to choose his/her gender with the keyboard.  depending on what key is pressed, the screen then goes to one with either a male or female transparent figure, a question to answer, and three choices for answers.  (i might rephrase this to "choose a gender," which would enable men to answer for women and vice versa, without having to specifically identify as the opposite gender.)  as you answer each question, the figure then fills up with color to indicate your progress through the game.

i based the questions off of my assignment from last week, so i started with that code and just sized down the arrays to consist only of three buttons, and manipulated the rectangles so they were long and thin instead of square.  i then created a question object which i placed into my row class along with the button objects in the array -- that way, my questions and potential answers stick together in one group.  they're textless for right now, but that's obviously going to change for the final, once we start learning about getting data into our sketches.

the biggest problems i had with this project thus far were getting the opening screen to fade out properly, getting the question & answer groups to appear one at a time, and getting the figures to fill up as you went along.   originally i started out with two svg files to fill up (and i was planning all sorts of complicated pixel manipulation to boot), but dan clued me into an easier way to do it -- just make the figures transparent in photoshop, and place a rectangle behind them that gradually moves up as the questions are answered.

as far as the fading, turns out i was putting the commands in the wrong place.  the fade check needed to happen in the draw loop, not in the keyPressed loop (where i had it before).  the thing that took me the longest, though, was figuring out how to get the questions appearing one at a time, and then get them to reset when a new one appeared.  i ended up having to make a new "rowState," and using that to reset the button states to 0 when a new row appeared on screen.

although this project was complicated, i actually understood what i was doing most of the way and am really excited about expanding this.  next steps include better graphics and design, an array of questions to answer (no pun intended!), and eventually, when a question's correct answer is revealed, i'd like to show a brief video/infographic/etc. giving the user more information about the topic before moving on.

icmRoopa Vasudevan