Site Updates: October 2015

An ongoing catalogue of Knossos Games website issues and minor updates.


Posted updated versions of Logic problems 6 through 10.

With ten Logic puzzles now available, updated the thematically organized Logic puzzles listing with group labels (arrangement, truth tellers & liars, arithmetic & algebra, ordering). Also added links on both pages of Logic puzzle listings to the blog entries explaining the updates (1 and 2).

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).

Corn maze directory

Recently joining other perennial autumn traditions, like apple picking and football games, are corn mazes. Visiting a corn maze is a quintessential fall activity, at least where I’m from (the midwestern United States). There are a wide variety of corn mazes, differing in size, style, design, and solving objective.

One of the many reasons I wanted to start a blog for Knossos Games was to write about corn mazes. Even with the widespread popularity of the burgeoning industry of agritourism, there is a surprising lack of commentary and analysis surrounding corn mazes. I’d like to change that.

For this first post, here is the single most useful resource for corn mazes: a directory where you can find a corn maze near you. This list is compiled by one of the few corn maze design companies, but is assembled as a service to the entire industry. As with any list, check to make sure your local maze is open and operating this season before heading out.

Get lost! Have fun!

IMG_2489

Update: Logic problems, Part 2

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-150
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.

logic.Puzzle07
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!

Site Updates: September 2015

An ongoing catalogue of Knossos Games website issues and minor updates.


Updated through WordPress v4.3.1.

Logic pages for chronologically and thematically ordered listings now better labeled as such.

Navigation bar on Logic 17 puzzle and solution pages now point to the most recent version of the Logic index page.


The Wind Farm puzzles received a significant update.


Fixed: Header graphics, linked versus unlinked

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.

Button
How about now?

I maintained the visual language of the navigation bar, which uses lighter colors as buttons which turn darker when clicked/tapped.

Colors2
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).

.content-blue-link {
	position:absolute;
	left:36px;
	top:0px;
	width:144px;
	height:36px;
	background-image: url(...);
	background-position: left top;
	color: #000000;}

.content-blue-link:hover {
	background-position: left bottom;
	color: #FFFFFF;}

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.

RollProbs

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.)

.button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;}

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.

<a href="spod.Index.html" ontouchstart ontouchend>
<span class="sidebar-green-instructions">
<span class="sidebar-green-instructions-text"> instructions </span>
</span>

Continuing aggravation: Fonts in SVG files

Problem: SVG files containing font information are not supported in Firefox (or Internet Explorer), only in Safari and Android Browser (WebKit). Mozilla decided to put their support behind Web Open Font Format (WOFF) instead.

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 font
Safari render with correct font (notice differences with 4, 8)