Spoiler alert: a solution to one of the gerrymandering puzzles is shown at the end of this blog post. Go back to the puzzles if you haven’t finished solving them!
Even though a new gerrymandering puzzle hasn’t been published in the magazine since 2008 (that was the last time an issue was politically themed), that was right around the time the website had its last major update. Thus, there wasn’t a lot of work involved in updating the gerrymandering puzzles to the latest version of the website.
One choice that may disappoint puzzle solvers out there: I took down a few gerrymandering puzzles that I had posted to the website that were never published in the magazine. I’m trying to reorganize the puzzles I have (not just the gerrymandering puzzles) in order to plan for the future of Knossos Games, and in this case that meant removing a few puzzles. I’m lobbying for a politically-themed issue of Imagine to appear soon, so that the magazine can publish another gerrymandering puzzle (or two).
As for specific changes to the puzzles and instructions in this update, there were only two major ones. First, a colleague of mine suggested that I replace “sub-district” with “precinct”, since that’s what we (in the United States) call the territories that collectively make up political districts. As soon as he suggested it, it seemed so incredibly obvious. This rewording appears in the main instructions page (and corresponding PDF for printed instructions), instruction reminders for each puzzle, and the detailed solutions.
Second, I also updated how the solution is shown. The solution to each of these puzzles needs to communicate two pieces of information: how the grid of precincts is physically divided into districts, and how this dividing up of the vote count results in more no voting districts than yes voting districts. Before, I showed these two pieces of information separately by displaying a full sized grid with the districts outlined and, off to the side, a separate list of the no and yes voting districts. I always thought this was a little clumsy, since you need to scan back and forth between these two pieces of information to make sense of the solution. I can’t believe I hadn’t thought of this before, but coloring the districts and linking their (also colored) vote totals brings these two pieces of information into one graphic. I think it’s much more clear now, even before getting to the detailed solution, how each solution works.
In my blog entries, I discovered I was using both “web site” and “website”. The Grammarist suggests that “website” is the commonly accepted usage (unless you are the New York Times), so I’ve updated prior blog posts to be consistent (including this one).
I knew that updating the logic problems for the new website would be a big task. Several logic problems were never posted to the last version of the website, and those that were still needed updated graphics and, in some cases, updated detailed solutions. I decided to break the logic problem update into pieces, so that I could better manage the work and post updates more frequently. The first update was back in March, 2015. Here’s what’s new in the second update:
Logic problem #6 – Marbles All the changes here were to the detailed solution explanation. Some of the language was clarified. A mathematical error found in one of the explanation’s graphics was corrected. The biggest change was replacing an argument concerning the divisibility of the number of Andrew’s marbles with a more direct fractional explanation. This not only made the explanation more straightforward (with new equation graphics), but also enabled me to provide an explanation of (commonly misunderstood) fraction multiplication in the solution.
Logic problem #7 – Corn Maze From the second update group, this problem needed the most work. Since I wanted this particular puzzle to appear in the fall in order to introduce a recurring blog feature on corn mazes, it also set a timeframe for when the entire update should be posted.
Undertaking a major update to the website presents opportunities to make significant changes, as well as fixing minor yet thorny problems. The graphic for the corn maze was the latter. At the time this puzzle was originally made (Fall 2006), my unsophisticated knowledge of Adobe Illustrator meant that I wasn’t capable of designing an acceptable corn maze graphic, one that would look like an actual corn maze from above. My aunt, who is a writer and artist, graciously stepped in to help. I sent her the outline of the maze and she sent back an illustration in the style that she uses for her books.
This is what was published in the magazine and what I posted on the website until now. Although I am grateful to my aunt for her assistance, I was never completely satisfied with the result. (One thing I absolutely love, however, is that bridge.) It just didn’t look like a corn maze to me, although it took me a long time to figure out why I felt that way.
The main issue, I realized, was that the path size to corn size ratio was incorrect. A corn maze has thin paths compared to the patches of corn separated by those paths1. The outline of the maze I originally designed had a path size to corn size ratio of 1:1, that’s what my aunt used as a template for the above illustration, and that didn’t look right. With thinner paths, the corn maze would feel appropriately bigger.
Even after I had identified this problem, fixing it was still a challenge. I first attempted to draw the new, skinnier paths on a green background representing the corn, but could not get the path corners to appear correctly rounded, as they would in an actual corn maze. After exhausting much time and effort on that method, I then decided to try a different approach, using expanded versions of the patches of corn on a background of brown dirt. The gaps in the patches of corn would thus result in the paths. Rounding the corners of the corn patches that do not have straight edges was still a challenge, since this is not natively supported in Adobe Illustrator 6 and earlier. After exploring my options, I ultimately chose to use the Round Any Corner script, which has mysteriously disappeared in the past few days.
One of the other issues I had with the original illustration was the stroke weight of the details representing the corn. I think my aunt’s intent was to represent the leafy texture of the corn plant, but photos of corn mazes show a more grainy texture where those details of the individual plants all blend together. Thus, I wanted to make my corn maze illustration have this sort of texture as well. While I was satisfied with the textures I could apply in Illustrator, I have not figured out how to successfully export these to an SVG file (so that the texture will still appear sharp on high-resolution displays). Thus, I dropped the textures altogether, as you can see above.
Finally, neither a graphical illustration of the correct solution nor a detailed solution for the problem were ever posted on the website. I had never actually thought through a detailed solution at the time I created the puzzle, so all of that needed to be worked out as well. It was tricky to figure out how to represent the path segments graphically in a way that didn’t need a lot of explanation. I also wanted a way to show the choices you needed to consider in picking which path segment to use next. The solution path shown is made up of several pieces, layered below the corn patches and above the brown dirt background. The toughest part here was getting the correct path thickness at splits and intersections. There is an intersection that is visited twice, and in order to clearly communicate which way you turn the solution path shouldn’t intersect or overlap itself there.
Logic problem #8 – Flight Plans The solution graphics were slightly modified to better support non-high resolution displays. This problem was one of the first to be written after the sixth version of the website debuted, and as such required few updates.
Logic problem #9 – Writer’s Group Increased the size of the graphics representing the circular table at which the authors meet, mostly to support a larger, more legible font. Also brought the table to the foreground to make the author positions (circles) look more like chairs, and to better highlight the two important author positions (poetry, screenplay) that are rotated midway through the solution to find non-problematic overlapping positions of clues.
Logic problem #10 – Castaway, Part 2 To better match the overall aesthetic of the website, reduced the stroke weight for the stick-figure graphics representing the rules on how the castaways lie to each other. I fixed the gradient backgrounds representing in-progress groupings in the detailed solution (or rather, I learned how to create them properly). The solution graphic font was changed to be more legible. Name cards, matching those from the updated first Castaway logic puzzle, were added to the solution graphic. Finally, a minor error in the detailed solution (switched a name) was corrected.
The third, final, and largest update to the logic problems is still to come. There is a lot of work that needs to be done in order to bring that group of logic problems to the website for the very first time, so it will take quite a while to complete. In the meantime, enjoy these problems and others on the site!
Problem: I’m always concerned about how the layout and general presentation of the website visually communicates how one navigates around the site. It occurred to me that the header and sidebar graphics use a consistent visual language while having inconsistent behavior. Sometimes these graphics are links that are clickable/tappable, and sometimes these graphics simply announce the next section of a page.
This isn’t as much of a problem on a computer with a mouse, since the site uses rollovers. But as more and more people use touchscreen devices, rollovers cannot be depended upon to communicate information. (On a computer, there is a difference between a point and a tap, whereas on a touchscreen, there is no difference between a point and a tap.)
Solution: By modifying the CSS and replacing a few of the navigation graphics, all clickable/tappable header graphics are now shown as buttons.
I maintained the visual language of the navigation bar, which uses lighter colors as buttons which turn darker when clicked/tapped.
The rollovers themselves use a clever trick that creates a quick, responsive change when pointing/tapping. The header graphic has an actual height of 72px, but the CSS specifies the displayed height as only half of this. This means that only half the graphic will be visible at any one time. Which half? When the graphic is originally displayed, it is aligned to the “top”, so the top half displays. When you point/tap, the graphic is aligned to the “bottom”, so the bottom half displays. Since both halves of the graphic are contained within the same file, the rollover/tap action is as fast as your browser can redraw the change (instead of as fast as your internet connection can download a new file).
Fixed: All-around misbehavior in touch interfaces (WebKit)
Problem: Oh, where to begin. I have noticed consistent differences between the computer version of the website and the touch-screen (WebKit) version of the website. In iOS 7, a tap showed a delayed behavior attached to a rollover. However, in iOS 8 and 9, that behavior was gone completely. Most of the offending behavior can be best summarized in the following graphic, which shows what happened when you tapped a rollover button.
Solution: I initially had no idea why this was happening. Turns out, this was a combination of two problems. First, WebKit displays a grey box around a tap target that contains a link. While I found this acceptable for text links, I didn’t want this for the navigational buttons, puzzle swaths, and headers on the site. It either produced a large grey box covering the entire (linked) graphic, or, as seen above, produced a tiny grey circle when it though no link was present. Fortunately, there is a way to turn this off. (The second line, apparently, is for some Android devices.)
Workaround: When saving Adobe Illustrator files as SVG, be sure to specify in the Options (save) window Fonts > Type > Convert to outline. This results in larger files sizes, and still doesn’t always work for some reason. For example, the coin box graphic for Logic problem #1 fails to render properly in Firefox. This makes no sense whatsoever, since the font is no longer a font: it is a vector object shape. But Firefox still renders it inappropriately.
Whenever I come up with a new idea for a puzzle, I try to create several of that type of puzzle at the same time, and the wind farm puzzles were no exception. But due to poor planning on my part, I was running out of suitable puzzles for the magazine from the group of puzzles I had originally created. So the first task was to reorganize the available puzzles and fill holes in the lineup by creating some new wind farm puzzles. Thus, for example, the puzzle originally labeled as #4 is now #6. This also meant that some puzzles that were “website exclusives” were taken down, since they are now included in my plans for what will be published in the future. Even though a couple of puzzles were removed from the website, there are now more wind farm puzzles available than ever before. Plus I now have a batch of wind farm puzzles for future publication in suitable issues of the magazine.
Until today, the correct solution to each wind farm puzzle was based on the nonspecific instruction of arranging the turbines to produce the most energy. I always felt that the solver should have a good reason to understand why their solution must produce the most units of energy, but that level of understanding can be difficult to achieve. Concerned that some solvers would never be confident that they had found the solution, all puzzles now include a “good, better, best” energy unit rating scale. This gives the solver some idea of what they should be shooting for when arranging the turbines. This was inspired by mobilegames I’ve seen that include a three star rating system for each level. The scale (different for each puzzle) is taken from various possible turbine arrangements, with “best” representing the absolute maximum amount of energy producible.
In addition to the solution, my goal is to always give some sort of solution explanation or problem space, depending on the type of puzzle. When the wind farm puzzles debuted on the website, they did not include detailed solutions. It took a lot of thinking and effort to figure out the simplest way to communicate how we can be sure that the best solution is, in fact, the best. I’m pleased to say that all wind farm puzzles now include detailed solution explanations of how to achieve the best energy output. Some of these (I’m looking at you Puzzle 10) took many attempts to figure out how to clearly and concisely explain the solution. I hope that these and other detailed solutions provide you with a helpful way of thinking about the puzzles.
An ongoing catalogue of Knossos Games website issues and minor updates.
Updated WordPress through v4.3.
Added footnotes plugin Easy Footnotes. This enables unobtrusive updates to older blog posts, such as this one (where I wanted to convey that the puzzle mentioned has now been posted).
Minor updates were necessary to the Logic Problems, Part 1update. First, the Logic problem #1 coin box graphic had the same issues encountered by the Space Pods graphics. The same workaround was successfully applied, although I continue to be perplexed as to what the underlying problem is. I also increased the font size for the graphics in the solution for Logic problem #4 so as to be more readable, especially on lower resolution displays. Finally, the PDFs for each puzzle were updated to the version 7 website design, which I neglected to do in the original update.
Fixed: Links between Knossos Games puzzles and blog entries
Problem: Blog entries about specific puzzles link back to those puzzles. However, visitors who surf directly to the puzzles may not know about the blog entries about those puzzles. Up to now, links from puzzles back to blog entires have been haphazardly posted. Need an organized way to add links from puzzle web pages back to blog posts. This is necessitated by the origin story blog entires for each logic puzzle, whereas past origin story blog entries were for entire groups of puzzles (which were easier to track and link).
Solution: This is a bit of a chicken-and-egg problem. Each puzzle web page needs to be posted first, then the accompanying blog entry can be created which links back to the puzzle. Once the blog entry is generated (and the link is fixed), the web page for the puzzle can be linked back to the blog entry. It took me a little while to recognize that this is the necessary order of things, but now that I have, I’ve added this process to my workflow for each puzzle or website update.
background: url(../splash/splash.svg) no-repeat center center fixed;
This code takes a background image, centers it in both directions, and (using code specific to each browser) resizes it so that the image covers at least the size of the browser window top-to-bottom or left-to-right.
While this achieved my original objective for the splash page, it also presented certain problems. In order to cover the largest possible screens, the graphic had to be huge. But for small screens, such as mobile devices (with fixed data plans), a big graphic makes little sense. (The splash page redirected to the homepage after a few seconds, so if your data connection was lousy, it would simply skip the load.) In addition, the size of the swaths was not consistent between screen sizes/devices, or between the splash page and the rest of the website, because of the resizing.
Solution: Instead of the edge-to-edge graphic for the splash page, there is now a five swath by five swath graphic that is centered in both directions based on the specific size of the graphic (css stylesheet code):
Continuing aggravation: Drop shadows in svg files do not properly display in Safari
Problem: In recreating the splash page graphic, specifically the drop shadow for the “featured in Imagine magazine” text overlay, I ran into a known issue in Safari: drop shadows in svg files do not properly display. Somehow, someway, I figured out how to trick Safari into displaying the drop shadow in the original, large splash graphic. But I could not figure out how I did this when recreating the image. Absolutely nothing worked.
Solution: After beating my head against the wall, I made a drop shadow by simply offsetting the text as black and translucent. (Nothing was done to blur the boundary, since that too has trouble rendering in Safari.) I’ll continue to revisit this issue as I change the new splash graphic to reflect current updates and featured puzzles.
While the site has been fairly dormant during the late Spring and Summer, don’t think for a moment that puzzle work has stopped at Knossos Games HQ. I’ve been hard at work planning and creating puzzles and updates for the magazine and website for the coming academic year. As I’ve commented before, several things are always going on at once, and I’ve used the past few months to think through behind-the-scenes issues, tackle ongoing problems, and get better organized. I’m excited about what’s coming, and I hope you’ll enjoy it when it arrives!
I knew that updating the logic problems for the new website would be a big task. Several logic problems were never posted to the last version of the website, and those that were still needed updated graphics and, in some cases, updated detailed solutions. I decided to break the logic problem update into pieces, so that I could better manage the work and post updates more frequently. Here’s what’s new in the first update:
Logic problem #1 – Coin Box
The main coin chest graphic was redone to make it look more like an actual chest of small drawers (like an old card catalog). This is the third or fourth version of this graphic, and I’m finally happy with it. The solution graphics, while visually the same as the last version, also needed to be redone, since the original graphics inside the Adobe Illustrator file somehow had already been exported to a non-vector format.
Logic problem #2 – Two-year Garden
The solution graphics in the last version contained explanatory text, which I’m universally trying to eliminate. This text was removed and replaced with descriptive text on the actual page. I had updated the solution graphics at some point for the last revision of the website, but those updated graphics were never posted for some reason. I further modified those updated graphics to improve the font and color. The detailed solution text was updated and expanded to be more clear, and to replace the aforementioned text from the old graphics.
Logic problem #3 – Castaway, Part 1
This update required the most work out of the first group. The graphics for this puzzle need to illustrate the ordering of names, and the previous graphics (including a hideous font choice) didn’t look very good. I replaced them by changing the font and creating a “ballot” theme as seen on the TV show that inspired the puzzle. The page-wide format of the old website allowed ample room for the graphics to be placed next to their corresponding clues and explanations. The current skinny-column version of the site (which improves readability) doesn’t contain very much room to have text next to graphics, so the CSS spacing of the two-column view is a bit of a hack.
While the solution, in terms of the order of names kicked off the island, is unchanged, the text of the detailed solution and the structure of the solution is improved. The original solution sometimes inserted names between previously ordered pairs, while the new solution strictly builds before or after the currently ordered list. This was motivated by the previously mentioned difficulty with the graphic layout (inserting names required wider graphics that would not have been easily arranged on the new website), but also made the solution more straightforward. With the detailed solution changes, the following clues were eliminated, since they were redundant and no longer necessary to solve the problem:
I was kicked off after Bill.
I was kicked off before Russel.
Holliday was kicked off before Paul.
Emory was kicked off before Eutaw.
Logic problem #4 – Bookstore
Even though the text (numbers, really) in the solution graphics is a bit small, it is reiterated in the text of the detailed solution, so these graphics were not changed (except, as with all graphics on the site, replaced with new svg versions). I corrected a typo in a solution equation which I hadn’t previously caught.
Logic problem #5 – Cineplex
I increased the size of the cineplex solution graphics to match the main cineplex puzzle layout graphic. The text of the detailed solution was modified to include the original clues and increase clarity of the solution.
Problem: In the overhaul of the entire Knossos Games website, the homepage was basically an afterthought. I had focused so much time and attention to how the content should be organized and presented (as well as the new code to support it all), that I hadn’t really figured out what should be on the new homepage. I’ve observed a few people interact with the site over the years, and the homepage from the last version seemed to be confusing (people weren’t sure what to click on or where to go next). My first attempt at the new homepage, however, was a boring overcorrection.
Solution: This time, I’ve tried to retreat from the blandness by including more puzzle swaths and sections (carried over from the category pages, like this one). I have more ideas, and it’s still a work in progress, but this is certainly better than what it used to be (and what it used to be before that).
Fixed: Numerous broken links across the site
Problem: There are a lot of broken links (temporarily) caused by pages from the older versions of the site coexisting with newer versions. (I’ll explain this situation in detail in another blog post at some point.)
Solution: The two-versions-ago homepage (kg.kghome.html) and an old attempt at creating an all-in-one puzzle index page (kg.CategoriesV6a.html) have now both been replaced with pointers to the current home page (kg.index.html). This fixes the vast majority of broken link issues.
In bringing the website for Knossos Games back to life (and I promise, there will be a few blog posts about specifically why it was gone and how it has returned), many things needed to be updated. Minor updates will be grouped together, major ones will get their own post, like this one.
With the publication of a new Space Pods puzzle in Imagine v22.n1 (September/October 2014), the Space Pods collection of puzzles became a good candidate for the next group of puzzles to be updated for the website, after the first major update (mazes).
In going through the graphics files in Adobe Illustrator, I realized that, overtheyears, I had constructed the puzzle graphics inconsistently. While this looked fine in print, and in the low resolution gifs used in the past, these inconsistencies would definitely show up in the scalable vector graphics drawn on high resolution displays of the updated site. Thus, the first task was to go back and clean up the original graphics files for each puzzle: the space pods puzzle and solution diagrams, as well as the solution charts.
If you look closely, there are a few fine details of how each space pods puzzle diagram is constructed. The grey squares representing the “doors” to the space pods are a good example. The surrounding wall lines overlap each door, which is meant to suggest that the doors are recessed and slide into the walls, like on your favorite science-fiction TV show or movie. (This style of door also visually looked the best compared to the many options I originally tried.) I fixed some consistency problems with the size of the gap for each door (especially gaps on a diagonal) by re-slicing and re-grouping the hexagon and hallway lines. The radius of the rounded edges of the doors was also changed to look more consistent across low and high resolutions.
The solution charts use a triple chevron arrow, and that was realigned to make it look sharper on low resolution displays, while also changing the style of the corner and ends. I then included a label above each highlighted step, because of the next change.
I have been increasingly unsatisfied with lengthy pages for solutions that include many steps. Having to scroll through step after step is not the best experience for reading the solution, since there is a temporal gap between focusing on one solution diagram and the next, and during that gap you need to maintain in your working memory the salient features of the last diagram in order to compare what has changed in the next. But a step-by-step approach to the solution is necessary for the these puzzles, in order to show how each of the three scientists moved around the space station.
Once the new images and pages were constructed, I ran into a bizarre issue in testing. In Safari (and possibly other WebKit-based browsers), the borders of the doors would inflate when you zoomed in on a diagram. Here is a compilation screenshot of the appropriate behavior:
And here’s what happened in Safari:
I could not figure out why this was happening. Other objects that have a non-zero point border do not exhibit this behavior when zooming in. The only thing I could think of was to take the rounded squares and expand them so that they would be borderless. In the end, this was a successful, if time consuming, workaround for the problem.
Finally, there is one additional piece of information that I would like to associate with each Space Pods puzzle and solution, and that is a diagram of the problem space (in other words, every possible way that the scientists can move through the puzzle). I have unfortunately run into some difficulties trying to create these charts in a clean, readable way. Since there are many, many more tasks to accomplish in bringing the website back to life, I decided to post the Space Pods puzzles and put this aside for the moment.