Problem/Motivation

This was a suggestion in #3172003: Keyboard navigation tweaks? that I really liked:

With tabs, maybe have tab move to the next/previous incomplete word, and the cursor to the first empty letter of that word?

Steps to reproduce

N/A

Proposed resolution

Add button and keyboard shortcuts for advancing to the next/previous unsolved clue.

Remaining tasks

TBD

User interface changes

  1. There is a new button in the active-clue div which is set to the right.
  2. There is a new wrapper element around the active-clue text.
  3. Users can move through unsolved clues by holding shift and using the right/left arrows.
  4. The instructions block has been updated to reflect this new UI. In addition, the instructions about entering text have been removed from the block to keep things snappier.

API changes

The js classes have some new functions.

  1. Clue: isComplete()
  2. Crossword: advanceToNextUnsolvedClue(), retreatToPreviousUnsolvedClue()

Data model changes

N/A

CommentFileSizeAuthor
#6 interdiff_4-6.txt4.03 KBdanflanagan8
#6 crossword--unsolved-clues--3176724--6.patch16.89 KBdanflanagan8
#4 interdiff_2-4.txt3.93 KBdanflanagan8
#4 crossword--unsolved-clues--3176724--4.patch15.49 KBdanflanagan8
#2 crossword--unsolved-clues--3176724--2.patch12.25 KBdanflanagan8

Comments

danflanagan8 created an issue. See original summary.

danflanagan8’s picture

danflanagan8
Primary language English
Location St. Louis, US
commented
StatusFileSize
new crossword--unsolved-clues--3176724--2.patch12.25 KB

Here's a patch. To clarify UI change #2, here is the before and after markup I'm talking about.

Before:

<div id="active-clues" class="active-clues">
  {# This gets populated by js #}
</div>

After:

<div id="active-clues" class="active-clues">
    <div class="active-clues-text">{# This gets populated by js #}</div>
    <button class="next-clue-express" id="next-clue-express" title="{% trans %}Next unsolved clue{% endtrans %}"></button>
</div>

This will potentially upset custom styles, but I really think this is the best place to put the button.

gnumatrix’s picture

gnumatrix commented

That works great! I've updated my theme to compensate for the changes. I do like how you made the button arrows. Nifty. Some thoughts for you.

1) A "prev-clue-express" seems to be a natural thing to add, to balance things out. I'd like it to be left of the active-clues-text. I guess this might be tricky if someone wanted them both on the right. Maybe add them to both sides and hide one on each? I think with display:flex the order of the display can be set via CSS explicitly, so that's an option too, I suppose.

2) Using the crosswords with an iPad and an Apple Pencil works remarkably well, and this next-clue makes it just that much better as there are no tabs or cursor keys in that usage scenario.

3) I really like the shift-left/shift-right. Works very well, particularly that it also wraps around. Kinda wish tab did that too, so that when you're on the last clue it would go to the beginning again.

4) For the instructions, would it be feasible to have an extra checkbox at the top (in the area where the "show errors" checkbox is) to say "show instructions" and then have that work as a toggle for the instructions block? Not sure if it makes sense to hard-code the name of the block being toggled or if a block selection would need to be added somewhere to make this work. I think I might also mentioned having a similar checkbox for showing/hiding the clues. For those that want to see them.

Check out https://www.500foods.com/crosswords if you would like to see how I've styled the new buttons so far.

danflanagan8’s picture

danflanagan8
Primary language English
Location St. Louis, US
commented
StatusFileSize
new crossword--unsolved-clues--3176724--4.patch15.49 KB
new interdiff_2-4.txt3.93 KB

Here's a new patch that should fix those broken tests.

Regarding the comments:

#1: Part of my thinking is that I would expect clues to be left aligned in most themes. I was also thinking that button would mostly be used by mobile users and wanted to keep that as clean as possible.

#2: Excellent!

#3: Probably a good suggestion. Updating that tabbing could be done unobtrusively at any time, so I'll probably do that at some point.

#4: I've been thinking about instructions a lot actually. I was thinking about adding a help link to the controls section that opens up the instructions in a modal/dialog.

gnumatrix’s picture

gnumatrix commented

#1: Clean is good, naturally, but if you can manage to sneak in a prev button it would still be helpful. Considerably easier in theming to hide something than it is to add something. Balance is also important. Even if they are both right-aligned, there's still a lot of UX value in being able to go back to the prev unsolved clue, particularly if you tapped on the next unsolved clue and just wanted to go back...

#4: Being able to toggle an encompassing div class (from "instructions-view" to "instructions-hidden" for example) for the instructions (and a separate one for the clues) I think might be simpler. And could be made modal if the themer wanted it to be modal.

danflanagan8’s picture

danflanagan8
Primary language English
Location St. Louis, US
commented
StatusFileSize
new crossword--unsolved-clues--3176724--6.patch16.89 KB
new interdiff_4-6.txt4.03 KB

Hey @GNUMatrix,
I finally got around to making some final updates to this issue. I took your suggestion #1 from comment #5. This may require you to touch up styling again. The active clues markup now looks like this:

<div id="active-clues" class="active-clues">
    <div class="active-clues-text">{# This gets populated by js #}</div>
    <div class="express-buttons">
      <button class="prev-clue-express clue-express" id="prev-clue-express" title="{% trans %}Previous unsolved clue{% endtrans %}"></button>
      <button class="next-clue-express clue-express" id="next-clue-express" title="{% trans %}Next unsolved clue{% endtrans %}"></button>
    </div>
</div>

I also updated the tab functions per your suggestion #3 from comment #3.

I'm still planning to do something with the instructions, but I'll do it in a new issue.

  • danflanagan8 committed cebad55 on 8.x-1.x 
    Issue #3176724 by danflanagan8, GNUMatrix: Add ability to cycle through...
danflanagan8’s picture

danflanagan8
Primary language English
Location St. Louis, US
commented
Status: Active » Fixed
gnumatrix’s picture

gnumatrix commented

I like it! Works great. Trivial to update the styling, so all good there, too.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.