Making an app in two days, with 7 Gen Blocks

With the election coming up, I thought it would be a good idea to create an app to teach about the historical barriers to voting for African-Americans and encourage people to vote. Here is how I made a game in two days using Adobe Firefly and 7 Gen Blocks.

Day 1: Created all of the artwork with Adobe Firefly (see next post about that).

Day 2: Making the game

I started by deciding what blocks I would need. That would be a splash screen and end screen, because you always need those, a visual novel block and a quiz block. The game theme sets the borders and colors. You can leave it as is or copy a different theme from the 7 Gen Blocks Pro directory.

Copy 7 Gen Blocks Demo files into a folder I’d named voter_game
Because my game would have two visual novel blocks, I renamed the first directory to “intro”, then, I copied the visual novel block again and renamed the second to “conclusion”.
I deleted all of the blocks I would not be using. Then, I copied the quiz block from the 7 Gen Blocks Pro repository. Now I had everything I needed and it looked like this.

I wanted blue icons, not the orange ones that are the default, so I went to the 7 Gen Blocks Pro directory and, from web_base >assets >images > themes > blue_theme , I copied the icons folder and pasted it into the game_theme folder

5. Making the splash screen

I had already downloaded the images I created from Firefly. To create the splash screen, I simply moved the splash.jpeg image into the images folder in the splash directory. I didn’t need to have a sound as the page transitions, but I thought it would be nice, so I named a random mp3 I liked splash.mp3 and copied it into the audio folder in the splash directory. In the splash_config file, I changed the completion_URL to be ../intro/intro.html. Because I wanted this game to be 100% accessible to, entered alt text for the background image. Splash screen done.

So you think you can vote? - Text is over a background of the American flag with a government building in the foreground.

6. The visual novel introduction

I changed the completionURL to ../quiz/quiz.html to go to the quiz when this block was done. I gave the block a title of Election Day. Then, for each scene, I put the link to the image I wanted to use, the text, and alt text for the image. I roped people in my house into recording the voice overs.

7. The quiz

In the quiz_config.js I set the number of questions and whether they should be presented randomly. For each question, I typed in the question, the type of question (text or number) and the answer. Because the literacy tests for voter registration were designed to fail everyone, I gave the correct answer as something like “12noon” and if you answered noon or 12 or 12pm, it was wrong. For other questions, the answer was complete nonsense that no one would guess. Of course, you would not normally do a quiz like this. I changed the completionURL to ../conclusion/end.html

8. The visual novel conclusion

This was exactly the same as step 6 with different text and images. The completionURL I changed to end_game/end_game.html

9. End Screen

The end screen is super simple. I just put the link for my background image in the config file and the text I wanted. This can be plain text or a link. Since I wanted to encourage people to vote, it’s linked to vote.gov

Code can be as simple or complicated as you make it

You might be wondering how hard it is to change these config files.

Here is my code for the page above. If you just wanted and end screen without a link to go somewhere and a styled button, you could have just ended at “Register to vote.”

const options = {
    bkImage: "../../images/s8_courthouse.png",
    bkImageAlt: "courthouse with American flag in back",
    titleText: "Register to vote.  <a href=\"https://vote.gov/\">
    <br/><button class='mt-xxl-5'>vote.gov</button></a>", // End game text
};


export {
    options
};

You could make a better game in more than two days

Could I have made a better game? Absolutely, and tomorrow I am going to work on improving our first draft of the game on Native American veterans , testing an update for Forgotten Trail and a second version of the voter game.

The HUGE benefit of 7 Gen Blocks

Every startup accelerator I know has the same message – get your product in front of people sooner. Even if the quiz interface could be better, I wanted to add a second option of a literacy test from another state and maybe a game, this two-day version was viewed by 400 people on LinkedIn and I got a few messages with suggestions. It was viewed by a couple thousand people on my personal Facebook page and I received a few more suggestions.

I made this app for the web and my co-founder was able to take what I had and start working on an iOS game.

Personally, I don’t think I could make a GREAT game in two days. However, as you can see, I can make a decent one, and with feedback from our user community, I can make a decent game into a great game far faster.

Question for you

I thought we might get more people to use the app if it had a game component. I was thinking maybe adding a runner game where you run to the polls (think of the dinosaur you get from Google when the internet is down). Some people think that having a game in an app that is teaching about as serious a topic as voter suppression is inappropriate. What do you think?

You can post your thoughts in the comments or hit me up on the socials. We have all the things:

Games That Make You Smarter