Even though this is the first time the Pathogen puzzles have appeared on the website, they still went through several design refinements. It took a while to get the right look for the contact chart and accompanying solution labels.
First row: initial attempt. Second row: larger circles, thinner connections. Third row: visual style used for first publication, medium connections between mid-sized circles, thicker boundary. Fourth row: final adjustments for second publication, thinner boundary, font and color changes.
Forming the seamless shape that encapsulates the contacts between circles/people was accomplished by merging shapes together (left column above), instead of trying to draw the shape from scratch. Unfortunately, there is a bug (I think) in the SVG rendering engine inside of Adobe Illustrator, as these complex shapes are not perfectly displayed on the website, regardless of browser. It’s a problem that I’m going to have to live with for the moment, as I can’t read the raw SVG code and mentally translate it into the visual shape to determine where the problem is.
Left: print. Right: website.
An additional complication was the fact that different sizes of graphics would be necessary for what appeared in print versus on the website. This is something I try to avoid, as it creates twice the number of images that need to be produced, but occasionally it makes sense. Here, the print images needed to be smaller to fit on the page, while larger web images were more legible on the screen. The print images are scaled by 150% with further adjustments to lighten the stroke weights.
Note: this blog entry shows some parts of Greek Temple puzzle solutions. Go back and solve the puzzles first!
Before this update, I had only ever posted to the website the first two Greek Temple puzzles (12.1 from 2004 and 13.2 from 2005). Subsequent Greek Temple puzzles (18.2 from 2010 and 19.2 from 2011) published in the magazine fell at a time when website updates were sporadic at best. With the most recent puzzle, it was time for a major update.
Most of the graphics have remained the same since my initial conception of the Greek Temple puzzles. For this update, I did, however, adjust the positioning of the alpha and beta labels on each tile.
Old (red, top) vs. new (blue, bottom), magnified 8x
This realignment was necessary to accommodate the biggest part of the current update: new, detailed diagrams that indicate solution steps though open and filled circles on each tile. Solutions were originally posted (and will continue to be posted in the magazine for compactness) as text through cardinal directions (N, S, E, W). This solution representation isn’t optimal, since it requires the reader to move through the solution one step at a time, going back and forth between the text of the solution and the puzzle diagram.
Thus, I’ve created these solution diagrams that show the path of the solution on the puzzle diagram itself, grouping several steps together at a time (using the same slideshow technique used with the Space Pod puzzles). It isn’t typically possible to show the entire solution at once, since this type of puzzle often relies on moving back and forth between tiles in order to change the state of the gateways.
Greek Temple puzzle 1, solution step 3: you have to take a step backwards first in order to open the gateway and move to the altar
Working out how to represent the overlapping parts of the solution path was one of the hardest aspects of designing clear, useful solution diagrams. Another challenge was that the solution path needed to represent two simultaneous pieces of information: your physical position in the puzzle, as well as the orientation of the gateways. This was resolved with using the open and filled circles.
One benefit of these new diagrams is that it also allows me to point out important parts of the puzzle space, so that I can describe why the solution must go the way that it does. While it is possible to represent the problem space of each puzzle as a tree diagram, I think it is more useful (for similar reasons described above) to show the loops, dead ends, and traps in the actual puzzle space.
Greek Temple puzzle 5, traps and dead ends
One final conundrum involved describing these pathways through words as your orientation to the puzzle space changes as you move through it. I decided to give directions for turns (left and right) based on your current position, but to describe parts of the temple (front and back) with respect to facing the entrance. This seemed to be the least confusing out of many bad options.
An ongoing catalogue of Knossos Games website issues and minor updates.
Updated through WordPress v4.4.1.
Posted a reindeer-themed logic puzzle for the holidays. Even though this (and future) holiday logic puzzles will have limited, seasonal availability through links from the homepage, I don’t plan to remove them entirely from the website. You can always find them here.
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.
Fixed some links between puzzles (Node Maze 2, Light Addition, No Left Turn, Wave Addition, and Wind Farm Puzzle 6). With these corrections, and the updated logic problems, puzzles from Imagine issues 12.1 through 12.5 (2004–2005), and issues 14.4 through 16.2 (2007–2008) are linked together through the navigation bar at the top of each page. (All of these puzzles are either on website versions 6 or 7.)
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.
Corn Maze for Logic problem 7, version 1
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.
Corn Maze for Logic problem 7, version 2
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.
Quick! Which one is a link?
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.
How about now?
I maintained the visual language of the navigation bar, which uses lighter colors as buttons which turn darker when clicked/tapped.
Old colors/buttons on the left, new on the right.
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.)
Second, the rollover was no longer being triggered by a tap, as it had been previously (if only fleetingly). The solution here, admittedly a hack, is to insert specific code in the HTML document to activate the “hover” style. The “ontouchstart” and “ontouchend” in the example below do absolutely nothing, other than trigger the “hover” style in the associated CSS. (It won’t work to insert this or some other code on the CSS end, since the tap never triggers the “hover” style, so the CSS document itself is never accessed.) Again, I chose this over a fancier solution using JavaScript.
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.
Firefox render with incorrect fontSafari render with correct font (notice differences with 4, 8)
Ever since the features of Apple’s iOS 9 were announced, there has been muchdiscussion surrounding the software’s ability to block ads. Now seems to be a good time to discuss several interconnected issues related to my website, starting with how I monetize the traffic flow and page views.
Simply put, I don’t. The business model for Knossos Games is that there is no business model. Knossos Games has always been presented free of advertisements. I intend to keep it that way. Ads on the web (and generally in life) have gotten way out of control, to the detriment of the entire experience. When you come to the Knossos Games website looking for quality puzzles, that’s what I want you to find. Nothing more, nothing less.
So how can I afford to do this? CTY and Imagine pay me for each submission to the magazine as a regular contributor, and they graciously let me retain the copyright for my work. Even so, the puzzles and the website are a hobby and not my main occupation, and as such I don’t rely on them for my main source of income. As an educator, I believe that knowledge wants to be free (in every sense of the word), and I want my work to be as accessible as possible. A long time ago I decided, in exchange for their payment, the magazine and its readers would get an exclusive window of opportunity to see my work before it is posted to the website. If you really enjoy Knossos Games and have a little money to spare, please consider buying a subscription to the magazine.
There are two things on the website, however, that some people might consider advertising. First, there are frequent links back to CTY and Imagine. I am grateful to them for giving me a nationally-published puzzle column in their magazine that I retain the rights to, so can you blame me? That being said, I get no direct income from those links and honestly have no idea if they have any impact whatsoever on web traffic to their site, interest in their programs, or increased readership of the magazine.
Second, when I mention on this blog a relevant puzzle book that I think you might like to read, I insert an Amazon Affiliate link. I do not intend to ever clutter up the main website with these links, or host the barrage of Amazon advertisements included in their program on the website or the blog. (Notice that I’m not even linking to Amazon within this post.) Each blog post link is clearly identified as such with a rollover. I can report that, in the first ten months of using Amazon Affiliate links, I’ve posted a grand total of two of them, and made zero dollars from them. Do yourself a favor and buy the books from your local bookstore after using Amazon to see the details.
Part 2: Traffic Analysis and Privacy
Your privacy is important. I want to be completely transparent as to what information I collect about those who read Knossos Games. I’m not a lawyer, but I wanted a privacy policy for the site, so here it is.
As I alluded to above, I have no information about subscribers to the magazine. I wouldn’t want it if it was offered to me. My editor has told me that Knossos Games has a small but loyal fan base, and this seems to be good enough to keep Knossos Games in print. If you are a long-time reader of the puzzle column, thank you!
I use three methods to collect anonymous information about visitors to the website. The first, which I’ve used for many years, is JavaScript code at the end of each puzzle website page (but not the blog) that sends information to StatCounter. The other two, which I started using in July 2015, are server-side tracking features for the puzzle website and the blog: Webalizer and AWStats. Both of these provide slightly different analytics from each other, and different from StatCounter. Together, these three services provide me with basic information about visitors to the website, such as: how you navigated to my website, what pages you visited, how long you browsed the website, and information about your location and device (screen size, operating system, and browser). If you are interested, all three services provide a complete listing of the data they collect at their respective websites. I do not get any information that would identify you personally, nor would I ever want to seek out that information.
Why do I want this basic information? Part of my motivation is simply curiosity. After years of having this website, it’s still thrilling for me to see that someone visited from very far away. Another part is to ensure that your experience on the site is a good one. Is the site coded and formatted in such a way so that your device can load it properly? Page views specifically help me determine what puzzles are popular and how people navigate the site. For example, featuring puzzles on the homepage unsurprisingly results in far more visitors to those puzzles. Knowing how people navigated to the site helps me understand how people find out about Knossos Games. Most traffic used to come in via links from CTY and Imagine, along with a few third-party blog posts that were highly ranked in Google searches for triangular or isometric graph paper. Now, almost all traffic is from the organization Hoagies’ Gifted, which links to Knossos Games under brain teasers and puzzles. (Much of this shift in traffic is due to broken links to the old website, unfortunately.)
What do I do with this basic information? I use it to make the site better. I only check it occasionally, most often when I need to make design decisions about the site. I would never use this information to advertise (see part 1), nor would I ever sell this information to others for them to advertise to you. If you are concerned about your information being collected through these means, from my website and others, I would encourage you to use internet anonymization tools.
Part 3: Is JavaScript necessary?
With so much obtrusive advertising and traffic analysis on the web, JavaScript ad blockers and people turning off JavaScript altogether are becoming more prevalent. This has been possible from the desktop and Android for some time, but Apple’s iOS 9 has raised the collective consciousness surrounding ad blocking. Regardless of whether this is good or bad, or the effects it will ultimately have, I’m trying to move away from relying on JavaScript wherever I can. I want to provide a baseline, excellent experience on my website using HTML5 and CSS3, only adding JavaScript to further enhance that experience.
This is why I chose a few months ago to add Webalizer and AWStats analytics in addition to the free StatCounter service I had been using for years. These two new services get their data directly from the server and do not rely on JavaScript whatsoever. Another example: in recently tinkering with the splash page, I embedded a link to the homepage within the graphic, in case the automatic JavaScript forwarding fails. Yet another example: I found a clever CSS technique to create step-by-step slideshows for the Space Podssolutionsthat completely avoids JavaScript.
It is unclear to me how this situation with JavaScript and ad blocking will shake out in the months and years ahead. But I will continue to look for ways to create a complete experience solely through HTML5 and CSS3, only then adding JavaScript for additional features.
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.
