Visual password help

I’ve been working in Twine Version 2.3.9 using Harlowe (3.1.0), but it’s early enough that I think I could switch to SugarCube if I had to.

(I am very new to this! I’ve run dozens of forum searches looking for answers, but it’s possible that I just don’t know what terms to search. So apologies if this has been covered.)

In the game I’m creating, I am trying to create a password page where, in order to access new information, the player must select the correct squares in a 12x3 grid. The squares can be selected in any order.

I set out intending to do this like so:

> |A1>[▢] |A2>[▢] |A3>[▢] |A4>[▢] |A5>[▢] |A6>[▢] |A7>[▢] |A8>[▢] |A9>[▢] |A10>[▢] |A11>[▢] |A12>[▢]
> |B1>[▢] |B2>[▢] |B3>[▢] |B4>[▢] |B5>[▢] |B6>[▢] |B7>[▢] |B8>[▢] |B9>[▢] |B10>[▢] |B11>[▢] |B12>[▢]
> |C1>[▢] |C2>[▢] |C3>[▢] |C4>[▢] |C5>[▢] |C6>[▢] |C7>[▢] |C8>[▢] |C9>[▢] |C10>[▢] |C11>[▢] |C12>[▢]
> 
> (click-replace: ?A1)[▣ (set: ?statusA1 to "selected")]

…and I stopped there because I was running into a number of problems. The main one being that, while it is possible to click a symbol to toggle it once, it does not seem possible in Harlowe to toggle back. I thought I’d be able to do this by programming the click to also rename the hook (to, say, “A1toggled”), but as far as I can tell, it is not possible to rename a hook.

Another unexpected problem is that clicking on A1 immediately changes the font size of that entire row, and I don’t know why.

Have I accidentally chosen a way-too-ambitious password format? Or is there an extremely simple method for making a password grid that I’m overlooking?

(I’ve looked into using radio buttons or checkboxes in SugarCube, but there doesn’t seem to be a way to set up a grid of them unlabelled?)

1 Like

I’ve gotten basically this going on with my game but in Twine 1.4. I don’t know the first thing about 2.0, but it can be done. I’m about to get to bed but I can show you some of my source stuff in the morning if you’d like.

Please use the Preformatted text option when including code examples in your comments, it stops the forum’s software converting standard quotes into invalid Typographical (curly) quotes.

There are a couple of issues with your code example:

1: (set: ?statusA1 to "selected")
You can’t assign a value to a hook reference. So you either mistyped $statusA1 or are trying to do something that isn’t supported.

2: (click-replace: ?A1)[▣ (set: ?statusA1 to "selected")]

…clicking on A1 immediately changes the font size of that entire row…

When you do a replace like the above content other than the ‘’ character is injected into the targeted hook. After the above link is selected the HTML elements making up the A1 hook looks something like the following…

<tw-hook name="a1">▣ <tw-expression type="macro" name="set"></tw-expression></tw-hook>

…and that extra <tw-expression> HTML element could effect how the page is displayed.

it does not seem possible in Harlowe to toggle back.

3: Unfortunately there is no (click:) macro equivalent of the (link-repeat:) macro, so you are going have to use a (display:) macro combined with a ‘child’ Passage to reapply the click macros.

The following TWEE Notation based example shows one possible method for achieving the outcome you described.

:: Start
{
	(set: $statusA1 to false)
	(set: $statusA2 to false)
	<!-- initialise the rest of the 'current' status variables. -->
}
|A1>[▢] |A2>[▢] |A3>[▢] |A4>[▢] |A5>[▢] |A6>[▢] |A7>[▢] |A8>[▢] |A9>[▢] |A10>[▢] |A11>[▢] |A12>[▢]
|B1>[▢] |B2>[▢] |B3>[▢] |B4>[▢] |B5>[▢] |B6>[▢] |B7>[▢] |B8>[▢] |B9>[▢] |B10>[▢] |B11>[▢] |B12>[▢]
|C1>[▢] |C2>[▢] |C3>[▢] |C4>[▢] |C5>[▢] |C6>[▢] |C7>[▢] |C8>[▢] |C9>[▢] |C10>[▢] |C11>[▢] |C12>[▢]

|clicks>[(display: "Click Logic")]


:: Click Logic
(click: ?A1)[
	(set: $statusA1 to not $statusA1)
	(if: $statusA1)[
		(replace: ?A1)[▣]
	]
	(else:)[
		(replace: ?A1)[▢]
	]
	(replace: ?clicks)[(display: "Click Logic")]
]
(click: ?A2)[
	(set: $statusA2 to not $statusA2)
	(if: $statusA2)[
		(replace: ?A2)[▣]
	]
	(else:)[
		(replace: ?A2)[▢]
	]
	(replace: ?clicks)[(display: "Click Logic")]
]
<!-- define the rest of the required click macro calls. -->

Thank you so much! (And yes, typo, I meant to make that $statusA1 a variable.)

I am working on implementing this. In the meantime I noticed that placing the symbols in a table makes the font size change much less noticeable, so leaving an example here for future seekers having the same problem…

> {(set: $A1 to "deselected")
> (set: $A2 to "deselected")
> (set: $A3 to "deselected")
> (set: $A4 to "deselected")
> (set: $A5 to "deselected")
> (set: $A6 to "deselected")
> (set: $A7 to "deselected")
> (set: $A8 to "deselected")
> (set: $A9 to "deselected")
> (set: $A10 to "deselected")
> (set: $A11 to "deselected")
> (set: $A12 to "deselected")
> 
> (set: $B1 to "deselected")
> (set: $B2 to "deselected")
> (set: $B3 to "deselected")
> (set: $B4 to "deselected")
> (set: $B5 to "deselected")
> (set: $B6 to "deselected")
> (set: $B7 to "deselected")
> (set: $B8 to "deselected")
> (set: $B9 to "deselected")
> (set: $B10 to "deselected")
> (set: $B11 to "deselected")
> (set: $B12 to "deselected")
> 
> (set: $C1 to "deselected")
> (set: $C2 to "deselected")
> (set: $C3 to "deselected")
> (set: $C4 to "deselected")
> (set: $C5 to "deselected")
> (set: $C6 to "deselected")
> (set: $C7 to "deselected")
> (set: $C8 to "deselected")
> (set: $C9 to "deselected")
> (set: $C10 to "deselected")
> (set: $C11 to "deselected")
> (set: $C12 to "deselected")
> <table style="width:300px">
>   <tr>
>     <td>|A1>[▢]</td>
>     <td>|A2>[▢]</td>
>     <td>|A3>[▢]</td>
> 	<td>|A4>[▢]</td>
> 	<td>|A5>[▢]</td>
> 	<td>|A6>[▢]</td>
> 	<td>|A7>[▢]</td>
> 	<td>|A8>[▢]</td>
> 	<td>|A9>[▢]</td>
> 	<td>|A10>[▢]</td>
> 	<td>|A11>[▢]</td>
> 	<td>|A12>[▢]</td>
>   </tr>
>   <tr>
>     <td>|B1>[▢]</td>
>     <td>|B2>[▢]</td>
>     <td>|B3>[▢]</td>
> 	<td>|B4>[▢]</td>
> 	<td>|B5>[▢]</td>
> 	<td>|B6>[▢]</td>
> 	<td>|B7>[▢]</td>
> 	<td>|B8>[▢]</td>
> 	<td>|B9>[▢]</td>
> 	<td>|B10>[▢]</td>
> 	<td>|B11>[▢]</td>
> 	<td>|B12>[▢]</td>
>   </tr>
>   <tr>
>     <td>|C1>[▢]</td>
>     <td>|C2>[▢]</td>
>     <td>|C3>[▢]</td>
> 	<td>|C4>[▢]</td>
> 	<td>|C5>[▢]</td>
> 	<td>|C6>[▢]</td>
> 	<td>|C7>[▢]</td>
> 	<td>|C8>[▢]</td>
> 	<td>|C9>[▢]</td>
> 	<td>|C10>[▢]</td>
> 	<td>|C11>[▢]</td>
> 	<td>|C12>[▢]</td>
>   </tr>
> </table> 
> 
> 
> (click-replace: ?A1)[▣ (set: $A1 to "selected")]
> (click-replace: ?A2)[▣ (set: $A2 to "selected")]
> (click-replace: ?A3)[▣ (set: $A3 to "selected")]
> (click-replace: ?A4)[▣ (set: $A4 to "selected")]
> (click-replace: ?A5)[▣ (set: $A5 to "selected")]
> (click-replace: ?A6)[▣ (set: $A6 to "selected")]
> (click-replace: ?A7)[▣ (set: $A7 to "selected")]
> (click-replace: ?A8)[▣ (set: $A8 to "selected")]
> (click-replace: ?A9)[▣ (set: $A9 to "selected")]
> (click-replace: ?A10)[▣ (set: $A10 to "selected")]
> (click-replace: ?A11)[▣ (set: $A11 to "selected")]
> (click-replace: ?A12)[▣ (set: $A12 to "selected")]
> 
> (click-replace: ?B1)[▣ (set: $B1 to "selected")]
> (click-replace: ?B2)[▣ (set: $B2 to "selected")]
> (click-replace: ?B3)[▣ (set: $B3 to "selected")]
> (click-replace: ?B4)[▣ (set: $B4 to "selected")]
> (click-replace: ?B5)[▣ (set: $B5 to "selected")]
> (click-replace: ?B6)[▣ (set: $B6 to "selected")]
> (click-replace: ?B7)[▣ (set: $B7 to "selected")]
> (click-replace: ?B8)[▣ (set: $B8 to "selected")]
> (click-replace: ?B9)[▣ (set: $B9 to "selected")]
> (click-replace: ?B10)[▣ (set: $B10 to "selected")]
> (click-replace: ?B11)[▣ (set: $B11 to "selected")]
> (click-replace: ?B12)[▣ (set: $B12 to "selected")]
> 
> (click-replace: ?C1)[▣ (set: $C1 to "selected")]
> (click-replace: ?C2)[▣ (set: $C2 to "selected")]
> (click-replace: ?C3)[▣ (set: $C3 to "selected")]
> (click-replace: ?C4)[▣ (set: $C4 to "selected")]
> (click-replace: ?C5)[▣ (set: $C5 to "selected")]
> (click-replace: ?C6)[▣ (set: $C6 to "selected")]
> (click-replace: ?C7)[▣ (set: $C7 to "selected")]
> (click-replace: ?C8)[▣ (set: $C8 to "selected")]
> (click-replace: ?C9)[▣ (set: $C9 to "selected")]
> (click-replace: ?C10)[▣ (set: $C10 to "selected")]
> (click-replace: ?C11)[▣ (set: $C11 to "selected")]
> (click-replace: ?C12)[▣ (set: $C12 to "selected")]}